<style> вставлено в content_scripts не применяется к элементу документа в background.js

Question

У меня есть скрипт, установленный на «run_at»: «document_idle», и он вставляет тег в заголовок.Однако попытка применить класс, определенный в нем, к элементу позже, не вызывает никаких изменений в элементе.

manifest.json:

{
    "manifest_version": 2,
    "name": "Test",
    "description": "make color",
    "version": "1.0",
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "content_scripts": [
    {
        "matches": ["*://*/*"],
        "js": ["pageload.js"],
        "run_at": "document_idle"
    }],
    "browser_action": {},
    "permissions": ["*://*/*","activeTab","tabs"]
}

pageload.js:

'use strict';

// onload, add our class "highlight"
var css = "\n\t.highlight { background-color: yellow; }\n",
    rstyle = document.createElement('style');

// Append style element to head
document.head.appendChild(rstyle);

//rstyle.type = "text/css";
rstyle.appendChild(document.createTextNode(css));

background.js (запускается при нажатии кнопки):

'use strict';

// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {

    // toggle putting the class on the body
    document.body.classList.toggle('highlight');

});

Когда страница загружается, я вижу элемент в заголовке.Когда я нажимаю кнопку, я вижу, что "class = 'highlight'" появляется в отдельных элементах dev (фоновая страница), но не в элементах dev браузера.Кто-нибудь знает, что мне не хватает?Спасибо!

Answer 1

Вот, в конечном счете, то, что сработало для меня - Использование обмена сообщениями между фоном и источниками контента:

'use strict';

// onload, add our class "highlight"
var css = "\n\t.highlight { background-color:yellow; }\n",
    rstyle = document.createElement('style');

// Append style element to head
document.head.appendChild(rstyle);

rstyle.type = "text/css";
rstyle.appendChild(document.createTextNode(css));

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if( request.message === "toggle_highlight" ) {
        document.body.classList.toggle('highlight');
    }
  }
);

и

'use strict';

chrome.browserAction.onClicked.addListener(function(tab) {
  // Send a message to the active tab
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "toggle_highlight"});
  });
});

Answer 2

Фоновый скрипт выполняется в собственном DOM.Чтобы изменить документ на активной вкладке, вам нужно использовать разрешение «activeTab» в разрешениях манифеста и выполнить код следующим образом

chrome.tabs.query({active: true, currentWindow: true}, 
function(tabs) {
    chrome.tabs.executeScript(
        tabs[0].id,
        {code: "document.body.classList.toggle('highlight');"});
});