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

时间:2013-05-30 04:13:17

标签: javascript google-chrome google-chrome-extension

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

目前我有:

  • 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内容页面注入>>>>> popup.html

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

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

2 个答案:

答案 0 :(得分:12)

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


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

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

现在为Popup pages。与background scriptcontent script不同,弹出窗口包含HTMLJS部分。 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
});

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

答案 1 :(得分:4)

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

背景页

正如您所说,这是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发生冲突。