10

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

目前我有：

  • manifest.json是否定义内容/backgr/事件页面做重要的事情，自动注入代码等？
  • popup.html本质上是 search.js 使用的搜索输入的外壳
  • search.js应该在 background/event/content/popup.html 页面中吗？

阅读后我仍然不明白的内容：

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

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

我知道的：

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

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

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

概括：

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

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

或许还有一点关于注入在 chrome 扩展中的工作原理（IE，我只需要指定它是 manifest.json 中的内容页面来注入它还是有更多的工作）/预期的行为？

为混乱的想法/问题/可能在阅读手册时错过与我的问题相关的内容道歉。

4

2 回答 2

13

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

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

Content scripts请参阅注入的 Javascript 和/或 css。它们是用于与网页交互的主要工具。他们对chrome.*api 的访问权限非常有限，但他们可以完全访问他们被注入的页面的 DOM。我们将在一分钟内重新使用它们。

现在为Popup pages. 与background scriptand不同content script，弹出窗口同时具有 aHTML和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
});

这几乎概括了它。有了这个，你应该能够让它工作。如果还有什么不清楚的，请告诉我，我会解决的。

于 2013-05-30T05:06:29.323 回答
4

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

背景页面

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

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

您可以像这样添加一个后台脚本来管理文件：

"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 冲突。

于 2013-05-30T05:29:38.547 回答