搜索和突出显示当前页面上的文本为Chrome扩展

Searching and highlighting text on current page for a Chrome Extension

本文关键字：文本 Chrome 扩展 显示 当前页 搜索      更新时间：2023-09-26

我应该如何连接我的页面来搜索和突出显示当前选项卡上的文本?

目前我有:

  • 清单。Json 定义内容/后台/事件页面做重要的事情，自动注入代码等?
  • pop .html 本质上是search.js使用的搜索输入shell
  • search.js 应该在后台/事件/内容/弹出窗口。html页面?

看完还是不明白的地方:

什么是内容页与背景/事件页?

我知道一个是不断运行vs注入，但这是尽可能多的我从chrome扩展手册，我仍然不太明白，如果内容脚本/页面是分开的popup.html为例，在popup.html与内容页/脚本之间的区别是什么。

我知道的:

我知道如何在页面上搜索文本，并使用JS替换它或更改其样式等。

我需要阅读关于Chrome扩展的消息传递API。

我知道我需要知道如何使用消息传递API，它是否需要页面搜索和突出显示?

简介:

我不需要一个walk through或完整的答案，只是一点帮助可视化Chrome扩展如何工作，或者至少我应该如何设置我的页面交互IE:

search.js内容页注入>>>popup.html

，也许是关于如何注入工作在chrome扩展(IE，我只需要指定它是在manifest内容页短一点。Json有它注入或有更多的工作)/预期的行为?

对于在阅读手册时混乱的想法/问题/可能错过与我的问题相关的事情表示歉意。

我将首先使每一种页面/脚本的目的更清楚。

首先是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
});

这几乎总结了它。有了这个，你应该可以让它工作。

如果还有什么不清楚的，请告诉我，我会解决它。

我想让你困惑的是"内容页"这个不存在的概念。没有这样的事情。你所指的可能是"内容脚本"。让我来解释一下扩展的三个主要组成部分:

背景页

正如你所说，这是一个Chrome扩展的持久方面。即使它可以是HTML页面，它也永远不会呈现。您只需使用它来运行JavaScript和其他保持持久化的内容。"刷新"后台页面的唯一方法是在扩展管理器中刷新扩展，或者重新安装扩展。

这对于保存应该保持持久的信息非常有用，例如身份验证凭据，或者应该随着时间积累的计数器。但是，只有在绝对必要的时候才使用背景页，因为只要用户在运行您的扩展，它就会消耗资源。

你可以像这样添加一个背景脚本:

"background": {
    "scripts": [
        "background.js"
    ]
},

或者像这样:

"background": {
    "page": "background.html"
},

然后通过一个典型的标签将background.js添加到background.html中。

弹出

这是当您单击工具栏上的图标时所看到的。它只是一个带有一些HTML的弹出窗口。它可以包含HTML, JavaScript, CSS和任何你会放在一个普通的网页。

并不是所有的扩展都需要一个弹出窗口，但是很多扩展都需要。例如，你的突出显示扩展可能不需要一个弹出，如果它所做的一切都是突出显示页面上的文本。然而，如果你需要收集搜索结果(这似乎是可能的)或为用户提供一些设置或其他UI，那么弹出窗口是一个很好的方法。

你可以像这样在manifest文件中添加一个弹出窗口:

"browser_action": {
    "default_popup": "popup.html"
},
内容脚本

正如我所提到的，这不是一个"页面"本身——它是一个脚本，或一组脚本。内容脚本是用来将JavaScript注入用户浏览器页面的脚本。例如，用户访问Facebook，内容脚本可以将背景更改为红色。这几乎肯定是你需要用来在页面上突出显示文本的工具。只需注入一些JavaScript和任何必要的库来搜索页面或抓取dom，并呈现对该页面的更改。

你可以在每次用户打开任何URL时注入内容脚本，像这样:

"content_scripts": [
    {
        "matches" : [
            "<all_urls>"
        ],
        "js" : [
            "content.js"
        ]
    }
],

上面的代码将"content.js"注入"all urls"。

您还需要将此添加到权限:

"permissions": [
    "<all_urls>",
]

您甚至可以将JQuery添加到内容脚本列表中。扩展的好处是内容脚本是沙盒的，所以您注入的JQuery版本不会在用户访问的页面上与JQuery发生冲突。

相关文章：