javascript - Chrome拡張機能のオン/オフボタン/アイコンを作成する方法は?

Question

ユーザーがいつスクリプトを実行するかを決定できるようにしたいので、ブラウザが開いたときに「オフ」アイコンが表示され、スクリプトが実行されません。ただし、ユーザーがクリックすると、「オン」アイコンに変わり、ユーザーがクリックするまでユーザースクリプトを実行します。それぞれ 32x32 の 2 つの png アイコンがあります:on.pngとoff.png.

私の2つの質問：

デフォルトのアイコンを off.png に設定するにはどうすればよいですか? 私はこれを試しましたmanifest.jsonが、アイコンが設定されず、代わりにパズルのピースが表示されました（デフォルトだと思います）：
```
...
"browser_action": {
   "default_icon": {
       "32": "off.png"
       },
   "default_title": "icon"
},
"icons": {
   "32": "on.png",
   "32": "off.png"
},
"background": {
   "scripts": ["background.js"] 
}, 
"content_scripts": [{ 
   "js": ["SCRIPT.user.js"]
...
```

これが私のです。ここではbackground.js、に基づいてオン/オフを切り替えるためのクイック関数を一時的に作成しました。onClicked

var status = 0;

function toggle() {
if (status == 0){
    chrome.browserAction.setIcon({path: "on.png", tabId:tab.id}); // so it's set for the tab user is in
    chrome.tabs.executeScript(tab.id, file:"SCRIPT.user.js"); //execute for this tab
    status++;
}
if (status == 1){
    chrome.browserAction.setIcon({path: "off.png", tabId:tab.id});
    chrome.tabs.executeScript(tab.id, code:"alert()"); // execute nothing when off
    status++;
}
if (status > 1)
    status = 0; // toggle
}

chrome.browserAction.onClicked.addListener(function(tab) {
    toggle();
});

(スクリプト、アイコン、マニフェストを格納するフォルダーを「アンパックされた拡張機能のロード」でロードし、「ビューの検査」を選択してすぐに何か問題があるかどうかを確認するUncaught SyntaxError: Unexpected token :と、background.js に表示されますが、'何を参照しているのかわかりません）...そして、スクリプトフォルダーにユーザースクリプトが表示されないようです

それで、何かアイデアはありますか？

score 10 · Accepted Answer

それでは、マニフェストページとバックグラウンドページにいくつか変更を加えさせてください。

マニフェスト.json

"browser_action": {
  "default_icon": "off.png",
  "default_title": "icon"
},

これでデフォルトになりますoff.png。アイコンセクションについては、ドキュメントを読んでその用途を確認してください。ただし、今は完全に削除してください。contentScripts セクションにあるものも削除します。プログラムで注入する場合は、マニフェストにリストする必要はありません。

次に、背景ページにいくつかの変更を加えて、もう少しきれいにします。

background.js

var toggle = false;
chrome.browserAction.onClicked.addListener(function(tab) {
  toggle = !toggle;
  if(toggle){
    chrome.browserAction.setIcon({path: "on.png", tabId:tab.id});
    chrome.tabs.executeScript(tab.id, {file:"SCRIPT.user.js"});
  }
  else{
    chrome.browserAction.setIcon({path: "off.png", tabId:tab.id});
    chrome.tabs.executeScript(tab.id, {code:"alert()"});
  }
});

javascript - Chrome拡張機能のオン/オフボタン/アイコンを作成する方法は?

1 に答える 1

Related

Reference