Chrome 扩展输入文本问题答案

【问题标题】：Chrome Extension Input Text IssueChrome 扩展输入文本问题
【发布时间】：2026-01-21 15:50:02
【问题描述】：

有人可以帮助我们吗？我们创建了一个扩展来在文本框中搜索关键词，如果找到关键词，我们就想将文本写入另一个文本框中。我们不确定如何在内容脚本中创建第二个发送响应（或者即使它是我们需要的发送响应），也不确定如何在后台脚本中访问它。代码如下。

内容脚本：

// Listen for messages
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
console.log(msg);

// If the received message has the expected format...
if (msg.text === 'report_back') 
{
    // Call the specified callback, passing
    // the web-page's DOM content as argument

    sendResponse(document.getElementById('.........').innerHTML);
} 

});

后台脚本：

var urlRegex = /^https?:\/\/(?:[^./?#]+\.)?*\.com/;

// A function to use as callback
function doStuffWithDom(domContent) {

var search = false;

if (domContent.match(/......./gi))
{
    window.alert('......');
}
else
{
    var r = confirm("Search indicates no tasks listed!");
        if (r == true) {

            //Type Text Code

        } else {

            x = "You pressed Cancel!"; //We are aware this does not do anything
        }
}

}

// When the browser-action button is clicked...
chrome.browserAction.onClicked.addListener(function (tab) {

 // ...check the URL of the active tab against our pattern and...
    // ...if it matches, send a message specifying a callback too

    chrome.tabs.sendMessage(tab.id, {text: 'report_back'}, doStuffWithDom);

});

清单：

{
"manifest_version": 2,
"name": "Test Extension",
"version": "0.0",


 "background": {
 "persistent": false,
 "scripts": ["background.js"]
 },
  "content_scripts": [{
  "matches": ["*://*.com/*"],
 "js": ["content.js"]
  }],
  "browser_action": {
  "default_title": "Test Extension"
   },

   "permissions": ["activeTab"]
   }

【问题讨论】：

我无法理解您所说的“创建第二个发送响应”是什么意思。当您发送消息时，您也会发送响应函数。如果您需要其他响应功能，为什么不发送另一条消息？还是让原始响应函数同时完成这两项工作？（请选择一个比 SOS 更有用的标题。）
嗨@Teepeemm，感谢您的关注。我们以前从来没有在 JS 中编程过，所以我们在这里有点吐槽，但我们试图发送第二条消息，但无法做到这一点。原始响应函数确实输入了我们需要的文本，但我们不希望它在单击 chrome 扩展时输入文本，我们希望在窗口警报内创建一个 OK 按钮，该按钮将在单击该按钮时输入文本。我希望这是有道理的。谢谢，
我的建议是弄清楚如何使用常规 javascript 执行此操作，然后尝试将其转换为扩展。我仍然无法弄清楚你想做什么。您有一个搜索文本框。如果找到了搜索文本，那么是否要将文本写入另一个文本框？为什么需要后台脚本？

标签： javascript web google-chrome-extension webpage dom-manipulation

【解决方案1】：

为什么不把后台脚本中的逻辑放到内容脚本中呢？因为你只是在搜索 dom 并弹出一个警告窗口。

内容脚本：

var doStuffWithDom = function (domContent) {
    if (domContent.match(/......./gi)) {
        window.alert('......');
    }
    else {
        var r = confirm("Search indicates no tasks listed!");
       if (r == true) {

           //Type Text Code

        } else {

            x = "You pressed Cancel!";
        }
    }
};

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
    if (msg.text === 'report_back') {
        doStuffWithDom(document.getElementById('.........').innerHTML);
    }
});

后台脚本：

chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.sendMessage(tab.id, { text: 'report_back' });
});

【讨论】：

您好，感谢您回复我们，我们之前尝试过这样做，但这种方式对我们也不起作用。我们所有的逻辑都按原样工作，我们只是不知道如何创建另一段将在内容脚本中运行并在后台脚本中的 IF TRUE 语句中调用的逻辑。我们尝试在内容中创建另一个“chrome.runtime.onMessage.addListener”，然后在 IF 语句中使用“chrome.tabs.sendMessage(tab.id, {text: '....'});'调用它但什么都没有。
@CameronCharlton 但是您在后台脚本中显示的唯一逻辑是查看选项卡的 url。您可以从内容脚本中执行此操作。
@Teepeemm 忽略我之前所说的，这很完美。非常感谢所有的帮助和反馈。它现在在文本框中搜索任何匹配的关键词，如果没有找到，则为我写入文本框。

【解决方案2】：

您似乎正在从后台 HTML 页面搜索 Dom 内容？您确定内容在后台页面内吗？

您的内容脚本在浏览的 HTML 页面“内”（实际上是沙盒）执行。我想你应该从内容脚本中搜索 DOM...

【讨论】：

看起来 doStuffWithDom 正在搜索 dom，但在调用别名 sendResponse 时会在内容脚本中发生这种情况。