Включить расширение хром Google «выключено» и «включено»?

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 должен что-то вернуть; поскольку вы ничего не возвращаете, я использовал Array.prototype.forEach. И, оказывается, вам не нужно slice, если вы звоните map или forEach в любом случае.

Конечный результат: