问题＃1

Question

我正在开发Chrome扩展程序，其目标是在后台访问网站并显示其中的特定值，用户应通过点击Chrome扩展程序图标查看该扩展程序打开特定选项卡。

这是我的popup.html：

<!doctype html>
<html>
  <head>
    <title>Notification Analyzer</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <h1>Current Notifications</h1>
    <a id="myLink" href ="https://website.com/notify/index.php"></a>
  </body>
</html>

我的popup.js：

a = document.getElementsByClassName('notificationArea').item('span').childNodes[6].textContent; // this is the value which I want to display on click of the extension icon

window.onload = function() {
   document.getElementById("myLink").innerHTML=a; 
} // Here, trying to add the value to the popup.html element

如果我尝试在特定网站标签上弹出警告框，则可以正常工作。但是在网站标签未打开时不在后台。

这里有两个问题：

如何使扩展程序能够在后台访问网站内容？
如何在popup.html中显示popup.js中的javascript内容

Answer 1

问题＃1

您可以使用content scripts访问网页，获取信息并通过messaging passing将其传递给background page。

问题＃2

第一部分

事实上问题＃1也是如此。以下代码应属于content script

a = document.getElementsByClassName('notificationArea').item('span').childNodes[6].textContent; // this is the value which I want to display on click of the extension icon

第二部分

然后你可以使用＆＃34;消息传递＆＃34;上面引用的是将其从content script传递给background page。

由于popup.js和background page都存在于扩展过程中，因此可以通过多种方式在彼此之间进行通信。您可以参考上一篇文章了解更多详情。 How to communicate between popup page and background page and store the info that I already get?

第III部分

最后，您可以使用popup.js中的代码来设置链接的文本。

window.onload = function() {
    document.getElementById("myLink").innerHTML=a; 
} // Here, trying to add the value to the popup.html element

附录

要获取要显示的值，您还可以只对网站进行ajax调用，查询返回的DOM并检索所需的数据。所有这些都可以通过popup.js完成。示例代码看起来像

$.ajax({
    url: url,
    callback: function (data) {
        var mydata = $(data).find('You css selector');
        document.getElementById("myLink").innerHTML=mydata; 
    }
});

Chrome扩展程序在后台运行

1 个答案:

问题＃1

问题＃2

第一部分

第二部分

第III部分

附录