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

Question

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

Answer 1

两种方法.

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