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