我将首先让每种页面/脚本的目的更加清晰。
首先是background page/script。 background script 是您的扩展程序所在的位置。它不是必需的，但为了完成大多数扩展操作，您需要一个。您可以在其中设置各种事件侦听器等，具体取决于您想要它做什么。它生活在自己的小世界中，只能使用chrome.* api 与其他页面和脚本进行交互。如果您将其设置为事件页面，则它的工作方式完全相同，只是它在不使用时卸载并在有事时加载回内存。
Content scripts 指注入的 Javascript 和/或 css。它们是用于与网页交互的主要工具。他们对chrome.* api 的访问权限非常有限，但他们可以完全访问他们被注入的页面的DOM。我们将在一分钟内重新使用它们。
现在为Popup pages。与background script 和content script 不同，弹出窗口同时具有HTML 和JS 部分。 HTML 部分就像任何其他页面一样，只是很小，并且作为从图标中弹出的覆盖弹出窗口。然而，它的脚本部分可以做背景页面所做的所有事情，除了它在弹出窗口关闭时卸载。
现在区别更清楚了，让我们继续您想要做的事情。听起来您想打开弹出窗口，让用户在当前选项卡中输入要搜索的文本，然后在页面上突出显示该文本。既然你说你已经知道你打算如何突出显示文本，那我就把这部分留给你。
首先设置我们的清单文件。对于这个特定的动作，我们不需要后台脚本。我们需要的是"tabs" 和"activeTab" 权限。这些将使我们能够稍后注入我们的脚本。我们还需要使用它的弹出窗口来定义浏览器操作。总而言之，它看起来像这样：
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs", "activeTab"
]
现在在我们的popup.html 文件中，我们只能有标记和css，根本没有内联代码。我们将把它全部放在我们的js 文件中并包含它。像这样的东西应该可以工作：
<!DOCTYPE html>
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<input type="text" id="searchText">
<button id="searchButton">Search</button>
</body>
</html>
这是我们回到内容脚本的地方。注入内容脚本有两种方法，第一种是在清单中定义。当您总是想为一组特定的 url 注入它时，这种方法效果最好。其次，在需要的时候使用chrome.tabs.executeScript方法注入。这就是我们将使用的。
window.onload = function(){
document.getElementById('searchButton').onclick = searchText;
};
function searchText(){
var search = document.getElementById('searchText').value;
if(search){
chrome.tabs.query({active:true,currentWindow:true},function(tabs){
chrome.tabs.executeScript(tabs[0].id,{file:search.js});
chrome.tabs.sendMessage(tabs[0].id,{method:'search',searchText:search});
});
}
}
这样，我们就成功地注入了我们的脚本，然后将搜索文本发送到该脚本。只需确保将脚本包装在 onMessage 侦听器中，如下所示：
chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
// message.searchText is the text that was captured in the popup
// Search/Highlight code goes here
});
这几乎概括了它。有了这个，你应该能够让它工作。如果还有什么不清楚的地方告诉我，我会解决的。