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

Question

我正在制作一个显示通知的chrome扩展程序，当用户单击通知上的按钮时，它将通过background.js在新标签中打开一个html文件，我需要在api调用后对其进行修改，但是我可以找不到通过我的background.js访问该页面的方法。

manifest.json权限 "permissions": ["http://*/*", "https://*/*","notifications", "webNavigation", "storage", "tabs","activeTab", "background" ]

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中-object { 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命令之前立即执行回调！如果不需要回调，则可以将其从上述代码示例中排除。

Answer 2

上面的代码有些错误。在您的var elm中，您正在尝试引用一个类，但是您正在使用getElementByID。

如您所见，我能够引用“ card”类。 （当我编辑HMTL时，我将类命名为“ card”，而不是“ cards”）。您应该可以简单地从getElementByID更改为getElementsByClassName。

我有一个类似的问题，我只是使用window.open（''，'window_name'）。对于单击按钮，我使该函数创建了新的弹出窗口，并为其命名。然后，我有另一个js文件，引用了相同的var existingWin = window.open（''，“ window_name”）。从那里开始，所有我的Dom元素都使用existingWin.document.getElementsByClassName（'whatever'）进行引用。我不得不跳很多圈，因为正在打开的页面无法控制，所以我不得不四处挖掘并找到正确的框架和JavaScript上下文来进行工作。如果您控制index.html，就不会遇到这个问题。

window.open