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

Question

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

Answer 1

两种方法。

1）Send a message到弹出脚本，提供有关如何更新视图的说明。

// 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）Obtain direct access到窗口对象。

// 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";
  /* ... */
}