如何连接我的网页以搜索并突出显示当前标签上的文字?
目前我有:
阅读后我仍然不明白:
什么是内容页面与背景/活动页面?
我知道有一个是经常运行vs注入,但这和我从chrome扩展手册中得到的一样多,我仍然不太明白内容脚本/页面是否与popup.html分开,例如popup.html与内容页面/脚本中的脚本之间的区别是。
我所知道的:
我知道如何在页面上搜索文本,并使用JS替换它或更改其样式等。
我需要阅读Chrome扩展程序的消息传递API。
我知道我需要知道如何使用消息传递API,它是否需要页面搜索和突出显示?
我不需要浏览或完整答案,只需要一点帮助可视化Chrome扩展程序的工作方式,或者至少我应该如何设置与页面交互相关的IE:
search.js内容页面注入>>>>> popup.html
也许还有一点关于注入如何在chrome扩展中起作用(IE,我只需要指定它是manifest.json中的内容页面,以便注入它还是有更多的工作)/预期的行为?< / p>
在阅读手册时,抱怨混乱的想法/问题/可能遗漏了与我的问题相关的事情。
答案 0 :(得分:12)
我将首先使每种页面/脚本的目的更加清晰。
首先是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
});
这几乎总结了它。有了它,你应该能够让它工作。如果仍然不清楚,请告诉我,我会解决它。
答案 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发生冲突。