我有一个 Chrome 扩展程序，当您单击图标时，它会显示一个文本字段和一个用于搜索的按钮。显示的内容基本上是从 list 中调用的 HTML 文档，如下所示:
"browser_action": {
"default_popup": "popup.html"
}
现在的问题是如何使用 javascript 访问浏览器中加载的当前文档？因为我想从文本字段中提取问题，然后去当前文档中查找答案。
谢谢!
编辑1:
代码:
list .json
{
"name": "SmartSearch",
"version": "1.0",
"manifest_version": 2,
"description": "Smart Search extension for Google Chrome.",
"content_scripts":
[
{
"matches": ["<all_urls>"],
"js": ["smartsearch.js"]
}
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
智能搜索.js
SmartSearch() = function (){
var x = document.title;
alert(x);
}
window.onload = SmartSearch;
popup.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Smart Search</title>
<script type="application/javascript" src="smartsearch.js"></script>
</head>
<body>
<p>Smart Search</p>
<form>
<input type="text" id="search_text_field"></input>
<input type="button" id="search_button" value="Search"/>
</form>
</body>
</html>
现在，我想做的就是当我按下扩展图标时显示当前加载页面的标题，只是为了检查我是否有权访问 DOM。问题是我得到了弹出窗口的标题。解决办法是什么？
编辑2: 我发现，如果我转到某个页面，带有该页面标题的警报在加载时会出现(有一些异常(exception)，例如 youtube 页面)，但我想在按下扩展程序的图标时执行此操作。
最佳答案
您需要使用 content script您可以在 list 上声明如下:
{
"name": "My extension",
...
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
],
...
}
其中匹配是您将在其中使用脚本的域。这样 css 和 js 就位于文档本身内部。但如果您需要将文档中的数据发送到您的插件，则需要使用 Message Passing 。这里有一个示例，说明如何从内容脚本向插件发送消息。
chrome.extension.sendMessage({greeting: "hello"}, function(response) {
console.log(response.farewell);
});
然后你必须使用chrome.extension.onMessage.addListener来接收消息。示例:
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
另一方面，如果您想从插件发送消息到您必须使用的内容脚本。
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
});
});
和之前一样chrome.extension.onMessage.addListener在另一端接收消息。
This是一个非常好的入门资源。
编辑:content_scripts 初始化的工作示例
体现:
{
"name": "Intervention",
"version" : "1.0",
"content_scripts": [
{
"matches": ["http://*/**"],
"js": ["action.js"]
}
],
"manifest_version" : 2
}
JS
var element = document.title;
alert(element);
关于javascript - 使用 Javascript 获取当前文档，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14405578/