Внедрение Javascript во вновь созданную вкладку в расширении Chrome

Я пытаюсь сделать расширение Chrome, которое создает новую вкладку с локальным «blanksite.html» и вставляет некоторый код JavaScript, делающий его зеленым. Вот что у меня так далеко.

background.js

chrome.browserAction.onClicked.addListener(function(activeTab){

  chrome.tabs.create({'url': chrome.extension.getURL("blanksite.html") }, function(tab) {
    chrome.tabs.executeScript(tab.id, {
      code: 'document.body.style.backgroundColor="green"'
    });
  });
});

manifest.json

{
  "manifest_version": 2,

  "name": "Open Green Google Tab",
  "description": "This extension opens a Green Google tab.",
  "version": "1.0",

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

  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
    "tabs",
    "activeTab"
  ]
}

Это открывает "blanksite.html" (буквально пустой HTML-файл) на новой вкладке, но не делает вкладку зеленой.

Я прочитал другие ответы наРасширение Chrome: создайте вкладку и вставьте в нее скрипт содержимого, поэтому я знаю, почему это не работает (не может напрямую внедрить код в chrome: // страницы расширения); но я не смог заставить решения, опубликованные в других ответах, работать на меня. Есть ли четкий, полный кусок небольшого кода, который может заставить работать то, что я хочу?

Боюсь, я не очень хорошо понимаю обмен сообщениями, поэтому для любого решения, которое имеет это как часть, было бы очень полезно более всестороннее объяснение.

Ответы на вопрос(1)

Решение Вопроса

Не уверен, почему запуск передачи сообщения с фоновой страницы в blanksite.html не будет успешным (возможно, уже слишком поздно слушать сообщение в blanksite.html при его создании?).

Однако запуск передачи сообщения из blanksite.html и выполнение соответствующего действия в ответе работает хорошо, см. Следующий пример кода:

blanksite.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="blanksite.js"></script>
</body>
</html>

blanksite.js

chrome.runtime.sendMessage({src: "newtab"}, function(response) {
    if(response.action === 'changeColor') {
        document.body.style.backgroundColor = 'green';
    }
});

background.js

chrome.browserAction.onClicked.addListener(function(activeTab) {
    chrome.tabs.create({url: chrome.runtime.getURL('newtab.html')});
});

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if(request.src === 'blanksite') {
        sendResponse({action: 'changeColor'});
    }
});
 Timothy Chu02 июл. 2016 г., 12:37
Большой! Но я должен был добавить задержку на слушателя, чтобы сделать эту работу - иначе это все еще ничего не делало.

Ваш ответ на вопрос