簡単なクロムプラグインを作成する

開始

シンプルなプラグインなので、必要なものだけが必要です。
最初のフォルダを作成し、私のフォルダが呼ばれChromeExtensions、そのフォルダ内の2つのファイルを作成し、それぞれmanifest.jsonindex.jsマニフェストのファイル名を変更することはできませんが、インデックスは、あなたが好きなものです:ノートは、。図にプロジェクトファイルディレクトリを示し、
ここに写真の説明を挿入
編集を開始します。
次の部分は、すべてのBaidu Webページの背景を黒変更することです。
次は、コードを入力することです
。マニフェストファイルに次のコードを入力します

{
    
    
    "name": "Handsome Wu's first extension",
    "version": "1.0",
    "manifest_version": 2,
    "content_scripts": [
        {
    
     "matches": ["<all_urls>"], "js": ["index.js"] }
    ]
}

最初の3行は必須であり、特定の意味は英語で理解する必要があります。これはデフォルトの要件として記述できます。このセクションの意味を
説明"content_scripts"てください。主にjsによって、現在アクセスしているページを変更できるdomを
使用"content_scripts"してください。実現された内部"matches"は、いくつかの一致ルールを含む配列です。つまり、ページのアドレスが配列の値と一致すると、jsファイルが操作されます。特定のWebページのみで効果を実現したい場合Baidu全体が実装されていない場合は、all_urlsを必要なURLに変更するだけです。そして、"js"内部は特定の操作であり、特定の操作は自分で書くことです。

index.jsファイルのコードは1行です

document.body.style.background = "#000";
/*  
    *document是获取的是网页的文档
    *body获取的是网页文档中body部分
    *style是样式属性
    *background是背景属性
    *#000是黑色
    *灰色部分是注释你可以不要输入进去
 */

これで、すべての入力作業が完了しました。nice〜
最後の仕事は、このスクリプトをchromeブラウザに追加することです。操作は図に示されています。

1

ここに写真の説明を挿入

2

ここに写真の説明を挿入
それからそれを使用することができます、効果は図に示されています
ここに写真の説明を挿入

さらに、jsの他の効果をいくつか記述します。それを実現したい場合は、自分でjsファイルに追加します。

//可以实现每次打开新页面时在浏览器输出一句话
alert('在这输入你想显示的话') 

/**************************************************/

//实现输出该页面有多少张图片
var imgs = document.querySelectorAll('img');  
alert(imgs.length);
//ps:这个方法如果遇到页面里面很多图片可能要加载很久才能出来

追記

HTML、CSS、JavaScript、およびjsonは、クロムプラグインの作成に使用されます。もちろん、それは問題ではありません。いくつかのすばらしい機能を実装する必要がない場合、それはひょうたんの描画にすぎません。
記事を真剣に読んでみると、プラグインを作るのはそれほど難しいことではないことに気付くでしょう。それは私にいいねをしてフォローするのと同じくらい簡単です。

おすすめ

転載: blog.csdn.net/weixin_47043419/article/details/109273952