Chromeの拡張機能は、別のHTML内で実行されるためpopup.jsから開いているWebページ内のHTMLを操作することはできません。同じタブで動いているわけでないので注意が必要。
Chrome拡張機能を作った際、意外と参考になる情報がなかったため書き溜め。
概要
作った拡張機能
先に、参考にしているソースコードは下記にある。
短期記憶を拡張するツールで「VolaStocker」といいます。
URLなどのページ情報を一時的に保存し、CSVでダウンロードすることができます。
一度ダウンロードすると、保存した情報は削除されます。
ブックマークにするほどでも、お気に入りにするほどでも、後で読むよりも短い将来に必要になるURLを保存しておく機能です。
特別なサーバに送信するなどはしないため、自分のようなプライバシー第一人間のための拡張機能です。
OSSなのでGithubにあげてます。
Chrome 拡張機能で必要なPermission
拡張機能から開いているタブのHTMLにアクセスするためには、Manifestファイルに２つのpermissionを宣言する必要があります。
activeTabは、拡張機能ボタンを押した際に開いているタブを特定するための権限です。
scriptingは、そのタブ内でJavaScriptを実行するための権限です。
動作するmanifest.json例
実際に動作するpermissionの例は下記
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{ "manifest_version": 3, "name": "VolaStocker", "version": "1.0.0", "author": "Norio4 Yahata", "description": "Simple Url Clip Box For Volatile Stock", "icons": { "16": "icons/16.png", "32": "icons/32.png", "48": "icons/48.png", "128": "icons/128.png" }, "permissions": [ "activeTab", "scripting" ], "action": { "default_popup": "popup.html" } } |
Permissionについての詳細は下記を参照。
現在のタブの特定方法
activeTabを使って拡張機能ボタンをクリックした際のタブ情報を取得する方法は下記。
chrome.tabsを使用します。
|
1 2 3 4 5 |
async function getCurrentTab() { let qo = {active: true, currentWindow: true}; let [tab] = await chrome.tabs.query(qo); return tab; } |
ここで定義した関数は後々も使います。
Scriptingを使用して指定したタブ内でJavaScript関数を実行する
タブ内で実行するscriptはフリーに書くのではなく、関数またはファイルを引数で渡す形になる。
chrome.scripting.executeScriptを使用します。
古い記事だと「chrome.tabs.executeScript()」を使う例が多くありますが、現在の拡張機能ではchrome.scripting.executeScriptを使わなくてはいけません。
下記は、parseHtmlという関数を先程のgetCurrentTabで取得したtabのidを渡しています。
|
1 2 3 4 5 6 7 8 |
await chrome.scripting.executeScript( { target: { tabId: tab.id }, func: parseHtml, args: [item] }, buildElement ) |
buildElementはコールバックです。
funcのparseHtmlは自由に定義でき、引数を渡す場合はargsに指定します。
じゃあね〜〜〜。