关闭Google Chrome扩展程序＆＃34;关闭＆＃34; ＆＃34; on＆＃34;？

Question

我是第一次开发Chrome扩展程序，并且每次点击扩展程序图标时都会触发一个内容脚本，然后转为＆＃34;关闭＆＃34;再次单击图标时，依此类推。我想知道是否有人可以帮我这个？下面是我到目前为止的代码。

的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的函数参数应返回一些内容;因为你没有返回任何东西，我使用了Array.prototype.forEach。事实证明，如果您正在呼叫slice或map，则不需要forEach。

最终结果：