javascript - 交换 Chrome 中所选选项卡内容中的一些单词

Question

假设我想更改 Chrome 扩展中所选选项卡的内容。我想将每次出现的 come 替换为 fly。

如何动态更改单词？

到目前为止，我到达了文档并替换所有出现的单词come，但无法将更新的内容写入所选内容选项卡。

我写的是；

chrome.tabs.getSelected(null,function(tab) {
    updatedContent = document.replace(/come, 'fly');

});

我怎样才能实现这个目标？

编辑:我的错误，document.replace 不能正常工作。

编辑2:根据@Haibara Ai的建议，我编辑为；

chrome.tabs.query( {active: true, currentWindow: true} ,function (tabs) { 
    chrome.tabs.executeScript(tabs[0].id, { code: 'document.body.outerHTML.replace(/come/g, "fly")' });
});

但是什么也没发生。也没有错误。

Answer 1

chrome.tabs.getSelected 在扩展程序的上下文中调用，而您要访问的 dom 存在于网页进程中，您无法直接从后台页面操作它。

要实现你想要的，你可以看看 chrome.tabs.executeScript ，它允许您进行编程注入(inject)，示例代码如下:

chrome.tabs.query({active: true, currentWindow: true},
    (tabs) => chrome.tabs.executeScript(tabs[0].id, {code: 'document.replace(/come, "fly");'}));

请注意，document.replace 效果不佳，您可以使用其他方法，例如 document.body.innerHTML.replace。

顺便说一句，chrome.tabs.getSelected 已被弃用，请使用 chrome.tabs.query{active: true} 代替。