使用镶版式扩展程序获取网页中的所有超链接标题



我正在开发一个应用程序,该应用程序需要获取当前选项卡中存在的所有 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]
}
]
  1. 使用 chrome.tab.sendMessage 从您的弹出文件向内容脚本文件发送消息。 该消息将初始化检查 DOM 的函数。

  2. 使用 addEventListener 侦听消息。 并运行您的函数来操作 DOM。

这是一个高层次的解释,每件事都写在文档中。

内容脚本 - https://developer.chrome.com/extensions/content_scripts

Chrome 标签页消息 - https://developer.chrome.com/extensions/tabs

最新更新