我正在开发一个应用程序,该应用程序需要获取当前选项卡中存在的所有 URL 标题(我们将鼠标悬停在超链接上时看到的标题(。我正在尝试为相同的内容制作一个铬扩展。在下面查找相关文件:
manifest.json
{
"manifest_version": 2,
"name": "Sentiment Analyzer",
"description": "This extension analyzes sentiments of tweets, facebook and instagram posts",
"version": "1.0",
"icons": {
"128": "icon128.png",
"48": "icon48.png",
"16": "icon16.png"
},
"browser_action": {
"default_icon": "icon16.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
弹出窗口.html
<!DOCTYPE html>
<html>
<head>
<title>Sentiment Analyzer</title>
</head>
<body>
<script type="text/javascript" src="popup.js"></script>
<button id="idanalyze"> Analyze </button>
</body>
</html>
弹出窗口.js
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('idanalyze').addEventListener('click', function(){
temp = "";
for(i = 0; i < document.links.length; i++)
{
temp += " "+document.links[i].title;
}
alert(temp);
}, false);
}, false);
当我在控制台中尝试以下代码时,它产生了预期的结果,即为每个超链接提供标题,但是当我尝试使用 chrome 扩展名获得相同的结果时,它不起作用。任何帮助/建议将不胜感激。
temp = "";
for(i = 0; i < document.links.length; i++)
{
temp += " "+document.links[i].title;
}
console.log(temp)
只有内容脚本文件才能操作页面 DOM,您正在尝试从弹出页面访问站点 DOM,因此它不起作用。
要解决它: 1. 创建一个文件并将其添加到清单中。
"content_scripts": [
{
"matches": [THE_URLS_YOU_WANT_TO_INJECT_FILE], //can be regex for any url
"js": [YOUR_FILE]
}
]
使用 chrome.tab.sendMessage 从您的弹出文件向内容脚本文件发送消息。 该消息将初始化检查 DOM 的函数。
使用 addEventListener 侦听消息。 并运行您的函数来操作 DOM。
这是一个高层次的解释,每件事都写在文档中。
内容脚本 - https://developer.chrome.com/extensions/content_scripts
Chrome 标签页消息 - https://developer.chrome.com/extensions/tabs