開啟和關閉Google Chrome擴展程序？

Question

我是第一次開發Chrome擴展程序，我有一個內容腳本，每次單擊該擴展程序圖標時，我都會將其觸發，然后再次單擊該圖標時將其關閉，依此類推。 我想知道是否有人可以幫助我？ 下面是我到目前為止的代碼。

的manifest.json

  {
 "manifest_version": 2,

 "name": "ROTATE",
 "description": "This extension will do unspeakable deeds of great importance.",
 "version": "1.0",
 "browser_action": { },

 "icons": { "16": "icon16.png",
            "48": "icon48.png",
           "128": "icon128.png" 
 },

 "background": {
   "scripts": ["background.js"]
 },

  "content_scripts": [
    {
    "matches": ["<all_urls>"],
    "js": ["content.js"]
    }
  ],

 "permissions": 
     ["activeTab"]
  }

content.js

['', '-ms-', '-webkit-', '-o-', '-moz-'].map(function(prefix){
Array.prototype.slice.call(document.querySelectorAll('div,p,span,img,a,body')).map(function(el){
    el.style[prefix + 'transform'] = 'rotate(' + (Math.floor(Math.random() * 10) - 1) + 'deg)';
    });
});

background.js

（我知道有一種使用消息傳遞的更好方法，但是我無法弄清楚。此外，這實際上無法使頁面恢復正常。）

 r toggle = false;
  chrome.browserAction.onClicked.addListener(function(tab) {
    toggle = !toggle;

 if(toggle){
   chrome.tabs.executeScript(tab.id, {file:"content.js"});
 }
 else{
   chrome.tabs.return;
 }
 });

我將不勝感激任何幫助。 謝謝！

編輯：仍然歡迎任何反饋！ 謝謝！

Answer 1

最少的更改是擁有第二個內容腳本，該腳本將撤消第一個內容腳本所做的所有操作：

el.style[prefix+'transform'] = 'rotate(0deg)';

但是，如果您多次單擊該按鈕，那么您已經多次注入相同的代碼，並且我的大腦對於所有優先級都感到困惑。

消息傳遞方法可能會更好。 我要進行的主要更改是將toggle到內容腳本中，以便可以在兩個單獨的選項卡中運行它（這也使狀態脫離了后台頁面，因此可以將其變成事件頁面）。 您的內容腳本最終將是：

var toggle = false;
chrome.runtime.onMessage.addListener(function() {
  toggle = ! toggle;
  Array.prototype.forEach.call(document.querySelectorAll('div,p,span,img,a,body'),function(el) {
    el.style.transform = 'rotate(' + (toggle?(Math.floor(Math.random() * 10) - 1):0) + 'deg)';
  });
});

而您的背景腳本將僅僅是：

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.sendMessage(tab.id,{});
});

最后說明：您知道它是Chrome，所以只需要一個轉換前綴（我認為是空白的）。 Array.prototype.map的function參數應該返回一些值； 由於您什么都不返回，因此我使用了Array.prototype.forEach 。 事實證明，無論如何，調用map或forEach都不需要slice 。

最終結果：