Chromeプラグイン開発シリーズ一：パチンコターミネーター開発実戦
一、プラグインは何ですか？
プラグインは一定の標準的なアプリケーションインターフェースに従って作成されたプログラムですが、chromeプラグインはchromeブラウザで実行されている小さなプログラムです。仕事や勉強中の煩雑なことを解決してくれます。
二、プラグインの基礎知識
chromeプラグインにとって、最も核心的なのはmanifest.jsonのこの配置ファイルであるべきです。それを利用して、どのようなタイミングでどのようなウェブページでどのようなスクリプトを実行するかを定義できます。
1、name拡張子の名前。
2、versionプラグインのバージョン。
3、maifest_version maifestプロファイルバージョンです。
4、descriptionのプラグイン機能についての説明。
5、iconsプラグインのアイコンはプラグインのために美しいアイコンを探すことができます。
6、browser_actionはプラグインのアイコンを定義できます。プラグインをクリックした時に表示されるページとプラグインのタイトルは常に一つのままにしておくことを勧めます。この属性アイコンを直接設定しないと灰色になります。設定したら明るくなります。
7、バックグラウンドページ、拡張プロセスの背景運行環境、修正要求などをブロックできます。
8、content_スクリプトの内容は、どのタイミングでどのページにどのようなスクリプトやcssリソースを挿入するかを指定できます。
9、permissions権限申請項目、例えば権限storgeを格納し、権限webRequest、webRequest Blockingなどをブロックするように要求する。
これらの基礎知識を理解した後、残りの仕事は私達が実現したい実際の機能によってコードを作成すればいいです。私達は正式に最初のプラグインを作成します。最初のプラグインですから、機能は簡単ですが、大きな名前のプラグインターミネーターを付けます。とりあえず私達を聞いてください。
まず素材のリンクを開きます。http://webpack.wuhaolin.cnこれはオンラインの本です。「深入浅出web pack」といいます。話はとても全面的で、興味のあるものは見てみてもいいです。全体に戻ります。第一章を見ると、すべてがとてもいいです。しかし、二枚目になると、とても迷惑な障子が現れます。
もちろん、プログラマとしての私たちはこの小さな弾戸に耐えられないと思います。そして初めての試みをして、開発者のツールを開けて、弾戸のあるノードを見つけて、取り除いてみました。しかし、私たちがページをスクロールすると、そのいまいましい弾枠が現れました。次に、私たちは第二の試みを行いました。ノードを取り外さないなら、私たちは取り外さないようにしました。同じように、ばねノードを見つけて、スタイルを追加します。
display:noneimpotant;
使用しますimpotantの目的はスタイル優先度を上げるために、パチンコがいつまでも見えないようにすることです。このスタイルを書いたら、パチンコが隠れてしまいます。また転がる時も現れません。しかし、他の章を見たり、ページを刷新したりする時に、悩みのあるフレームが出てきます。自動的に隠し処理できますか？
本当の技術を披露する時です。基礎知識を紹介する時に、content(u)に言及しました。scriptsフィールドは、どのタイミングでどのページにどのようなスクリプトやcssリソースを挿入するかを定義できます。私たちは上のページにロードが完了したら、ページに隠しポップアップのcssコードを注入すればいいです。
このセクションの内容はこれで終わります。このシリーズでは、できるだけみんなと一緒に実用的なプラグインを作成します。後の文章を期待してください。
ここで猛突して、この文章の判例のソースコードのカバンをダウンロードします。
以上でChromeプラグインの開発に関する一連の記事を紹介します。実際の文章をパチンコターミネーターで開発したので、これに関連してChromeプラグインの開発内容は以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。
プラグインは一定の標準的なアプリケーションインターフェースに従って作成されたプログラムですが、chromeプラグインはchromeブラウザで実行されている小さなプログラムです。仕事や勉強中の煩雑なことを解決してくれます。
二、プラグインの基礎知識
chromeプラグインにとって、最も核心的なのはmanifest.jsonのこの配置ファイルであるべきです。それを利用して、どのようなタイミングでどのようなウェブページでどのようなスクリプトを実行するかを定義できます。
{
//
"name": "MyExtension",
// 。 1 4 。 "."
"version": "1.0",
// manifest 。Chrome18 2
"manifest_version": 2,
// 。132
"description": ",
// 。 16，48，128
"icons": {
"16": "image/icon-16.png",
"48": "image/icon-48.png",
"128": "image/icon-128.png"
},
//
"default_locale": "en",
// ，
// ，
"browser_action": {
"default_icon": "image/icon-128.png",
"default_title": "My Message",
"default_popup": "html/browser.html"
},
// 。
"page_action": {
"default_icon": "image/icon-48.png",
"default_title": "My Test",
"default_popup": "html/page.html"
},
// ，
"theme": {},
// URL
"app": {},
// background
"background": {
"scripts": [
"lib/jquery-3.3.1.min.js",
"js/background.js"
],
"page":"html/background.html"
},
//
"chrome_url_overrides": {
"pageToOverride": "html/overrides.html"
},
// web / css /
"content_scripts": [{
"matches": ["https://www.baidu.com/*"],
"css": ["css/mystyles.css"],
"js": ["lib/jquery-3.3.1.min.js", "js/content.js"],
"run_at": "document_idle"
}],
//
"content_security_policy": ",
"file_browser_handlers": [],
//
"homepage_url": "http://xxx",
//
"incognito": "spanning",
//
"intents": {},
// 。
"key": ",
// chrome
"minimum_chrome_version": "1.0",
//
"nacl_modules": [],
//
"offline_enabled": true,
// ominbox 。
"omnibox": {
"keyword": "myKey"
},
// 。
"options_page": "aFile.html",
//
"permissions": [
"https://www.baidu.com/*",
"background",
"tabs"
],
// 。
"plugins": [{
"path": "extension_plugin.dll",
"public": true
}],
// 。 "3D"
"requirements": {},
//
"update_url": "http://path/to/updateInfo.xml",
// ， String
"web_accessible_resources": []
}1、name拡張子の名前。
2、versionプラグインのバージョン。
3、maifest_version maifestプロファイルバージョンです。
4、descriptionのプラグイン機能についての説明。
5、iconsプラグインのアイコンはプラグインのために美しいアイコンを探すことができます。
6、browser_actionはプラグインのアイコンを定義できます。プラグインをクリックした時に表示されるページとプラグインのタイトルは常に一つのままにしておくことを勧めます。この属性アイコンを直接設定しないと灰色になります。設定したら明るくなります。
7、バックグラウンドページ、拡張プロセスの背景運行環境、修正要求などをブロックできます。
8、content_スクリプトの内容は、どのタイミングでどのページにどのようなスクリプトやcssリソースを挿入するかを指定できます。
9、permissions権限申請項目、例えば権限storgeを格納し、権限webRequest、webRequest Blockingなどをブロックするように要求する。
これらの基礎知識を理解した後、残りの仕事は私達が実現したい実際の機能によってコードを作成すればいいです。私達は正式に最初のプラグインを作成します。最初のプラグインですから、機能は簡単ですが、大きな名前のプラグインターミネーターを付けます。とりあえず私達を聞いてください。
まず素材のリンクを開きます。http://webpack.wuhaolin.cnこれはオンラインの本です。「深入浅出web pack」といいます。話はとても全面的で、興味のあるものは見てみてもいいです。全体に戻ります。第一章を見ると、すべてがとてもいいです。しかし、二枚目になると、とても迷惑な障子が現れます。
もちろん、プログラマとしての私たちはこの小さな弾戸に耐えられないと思います。そして初めての試みをして、開発者のツールを開けて、弾戸のあるノードを見つけて、取り除いてみました。しかし、私たちがページをスクロールすると、そのいまいましい弾枠が現れました。次に、私たちは第二の試みを行いました。ノードを取り外さないなら、私たちは取り外さないようにしました。同じように、ばねノードを見つけて、スタイルを追加します。
display:noneimpotant;
使用しますimpotantの目的はスタイル優先度を上げるために、パチンコがいつまでも見えないようにすることです。このスタイルを書いたら、パチンコが隠れてしまいます。また転がる時も現れません。しかし、他の章を見たり、ページを刷新したりする時に、悩みのあるフレームが出てきます。自動的に隠し処理できますか？
本当の技術を披露する時です。基礎知識を紹介する時に、content(u)に言及しました。scriptsフィールドは、どのタイミングでどのページにどのようなスクリプトやcssリソースを挿入するかを定義できます。私たちは上のページにロードが完了したら、ページに隠しポップアップのcssコードを注入すればいいです。
.gitbook-plugin-modal {
display: none!important;
}
{
"name": "PopBlock",
"version": "1.0",
"manifest_version": 2,
"description": " ",
"browser_action": {
"default_title": "PopBlock"
},
"content_scripts": [{
"matches": ["http://webpack.wuhaolin.cn/*"],
"css": ["css/popup.css"],
"run_at": "document_end"
}]
}このセクションの内容はこれで終わります。このシリーズでは、できるだけみんなと一緒に実用的なプラグインを作成します。後の文章を期待してください。
ここで猛突して、この文章の判例のソースコードのカバンをダウンロードします。
以上でChromeプラグインの開発に関する一連の記事を紹介します。実際の文章をパチンコターミネーターで開発したので、これに関連してChromeプラグインの開発内容は以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。