Question

如何连接我的网页以搜索并突出显示当前标签上的文字？

目前我有：

manifest.json 定义内容/背景/事件页面做重要事情，自动注入代码等吗？
popup.html 本质上是搜索输入的shell，由search.js
search.js 应该在background / event / content / popup.html页面吗？

阅读后我仍然不明白：

什么是内容页面与背景/活动页面？

我知道有一个是经常运行vs注入，但这和我从chrome扩展手册中得到的一样多，我仍然不太明白内容脚本/页面是否与popup.html分开，例如popup.html与内容页面/脚本中的脚本之间的区别是。

我所知道的：

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

我需要阅读Chrome扩展程序的消息传递API。

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

要点：

我不需要浏览或完整答案，只需要一点帮助可视化Chrome扩展程序的工作方式，或者至少我应该如何设置与页面交互相关的IE：

search.js内容页面注入＆gt;＆gt;＆gt;＆gt;＆gt; popup.html

也许还有一点关于注入如何在chrome扩展中起作用（IE，我只需要指定它是manifest.json中的内容页面，以便注入它还是有更多的工作）/预期的行为？< / p>

在阅读手册时，抱怨混乱的想法/问题/可能遗漏了与我的问题相关的事情。

Answer 1

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

首先是background page/script。 background script是你的扩展所在的地方。这不是必需的，但为了做大多数扩展事情，你需要一个。在其中，您可以设置各种事件侦听器，具体取决于您希望它做什么。它存在于自己的小世界中，只能使用chrome.* apis与其他页面和脚本进行交互。如果将其设置为事件页面，它的工作原理完全相同，只是它在不使用时卸载，并在有事情时加载回内存。

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
});

这几乎总结了它。有了它，你应该能够让它工作。如果仍然不清楚，请告诉我，我会解决它。

Answer 2

我认为令人困惑的是“内容页面”的不存在概念。哪有这回事。您可能指的是“内容脚本”。让我解释一下扩展的三个主要组成部分：

背景页

正如您所说，这是Chrome扩展程序的持久性方面。即使它可以是HTML页面，它也永远不会被渲染。您只需使用它来运行JavaScript和其他保持持久性的内容。 “刷新”后台页面的唯一方法是刷新扩展管理器中的扩展，或重新安装扩展。

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

您可以添加类似manafest文件的后台脚本，如下所示：

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

或者像这样：

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

然后只需通过典型标记将background.js添加到background.html。

<强>弹出

这是您单击工具栏上的图标时看到的内容。它只是一个带有一些HTML的弹出窗口。它可以包含HTML，JavaScript，CSS以及您在普通网页中放置的任何内容。

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

您可以在清单文件中添加一个弹出窗口，如下所示：

"browser_action": {
    "default_popup": "popup.html"
},

内容脚本

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

每次用户打开如下所示的URL时，您都可以注入内容脚本：

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

以上将“content.js”注入“所有网址”。

您还需要将此添加到权限中：

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

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

搜索并突出显示Chrome扩展程序当前页面上的文字

要点：

2 个答案: