Google chrome 从后台脚本更改默认弹出页面的CSS/DOM

如何从后台脚本的任何侦听器修改弹出页面DOM？

两种方法

1） 添加到弹出式脚本，并说明如何更新视图

// background.js
chrome.runtime.sendMessage({updatePopup: true, update: "this", data: "that"});

// popup.js
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  if(message.updatePopup) {
    switch(message.update) {
      /* ... */
      case "this":
        document.getElementById("this").value = message.data;
        /* ... */
        break;
      /* ... */
    }
  }
});

还有一个额外的好处是不关心弹出窗口是否实际打开：消息将被发送出去，最坏的情况是没有人会对其采取行动

2） 指向窗口对象

// background.js

// A rare case of a synchronous API..
var windows = chrome.extension.getViews({type : "popup"});
if(windows) { // If popup is actually open
  var popup = windows[0]; // This is the window object for the popup page
  popup.document.getElementById("this").value = "that";
  /* ... */
}

两种方法

1） 添加到弹出式脚本，并说明如何更新视图

// background.js
chrome.runtime.sendMessage({updatePopup: true, update: "this", data: "that"});

// popup.js
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  if(message.updatePopup) {
    switch(message.update) {
      /* ... */
      case "this":
        document.getElementById("this").value = message.data;
        /* ... */
        break;
      /* ... */
    }
  }
});

还有一个额外的好处是不关心弹出窗口是否实际打开：消息将被发送出去，最坏的情况是没有人会对其采取行动

2） 指向窗口对象

// background.js

// A rare case of a synchronous API..
var windows = chrome.extension.getViews({type : "popup"});
if(windows) { // If popup is actually open
  var popup = windows[0]; // This is the window object for the popup page
  popup.document.getElementById("this").value = "that";
  /* ... */
}

---

你的回答很有帮助，但是当弹出窗口被隐藏时，我不能用你给定的脚本修改DOM/CSS。事实上你不能。这就是为什么background.js永远不应该假设它是打开的。你的回答非常有用，但是当弹出窗口被隐藏时，我不能用你给定的脚本修改DOM/CSS。事实上，你不能。这就是为什么background.js永远不应该假定它是开放的。