javascript - 如何从background.js中的当前选项卡获取文档

Question

我正在制作一个显示通知的chrome扩展，当用户单击通知上的按钮时，它会通过background.js在新选项卡中打开一个html文件，我需要在api调用后修改该文件，但我可以'找不到通过我的background.js访问该页面的方法。

manifest.json 权限 “权限”:[“http://*/*”、“https://*/*”、“通知”、“webNavigation”、“存储”、“选项卡”、“activeTab”、“背景” “]

background.js 的一部分

chrome.notifications.onButtonClicked.addListener(function() {
  chrome.tabs.create({'url': 'index.html'}, (tab) => {
    chrome.tabs.executeScript(tab,add_new_card());
  });
});


function add_new_card(){
  var elm= document.getElementById("cards");
  console.log(document);
  let new_card = '<div class="col-5 col-md-3 col-lg-2 p-0 mr-2 col"> ' +
                     '<div class="card"> ' +
                        '<a class="text-center" href=""> ' +
                        '<div class=" f-16 text-dark mt-4 card-title"> '+
                        '<strong class="text-capitalize">NEW CARD</strong> '+
                      '</div> </a>  </div> </div> ';
  elm.append(new_card);
}

我尝试了很多方法，但总是从 document.getElementById("cards") 中得到 null。

Answer 1

我还没有使用过“executeScript”命令，因为我总是使用通用的内容脚本，但据我在official documentation中看到的，您需要将代码插入 JS 对象 { code: '<your_actual_code>' } ，而<your_actual_code>被放入一个字符串中。

例如

chrome.tabs.executeScript({ code: "console.log('Hello World!')" }, callback);

如果您不想将代码放入完整的字符串中(我可以理解但不建议这样做)，您也可以将您的方法(没有函数包装器!)排除在另一个文件中。在这种情况下，您可以通过执行代码

chrome.tabs.executeScript({ file: "/my-code.js" }, callback);

注意callback需要在您的 background.js 中再次定义并且附加时不带括号；否则，您将在 executeScript 之前立即执行回调。命令已执行!如果您不需要回调，可以将其从上面的代码示例中排除。