Question

我正在尝试制作一个Chrome扩展程序，根据您所在的网站显示弹出窗口中的不同文本。

当点击扩展图标时，popup.js会询问当前网站的background.js，以及它是否为＆＃34;生产性＆＃34;一个（在代码中明确定义）。根据返回的内容，popup.js使用.innerHTML将popup.html中的文本更改为＆＃34; Productive Site＆＃34;或＆＃34;非生产性网站＆＃34;

除了一个bug之外，所有代码都有效。在＆＃34;生产＆＃34;之间切换时并且＆＃34;非生产性的＆＃34;网站，第一次按下扩展图标显示旧状态。再次按下它会将弹出窗口的文本更新为正确的状态。

例如，如果＆＃34; facebook.com＆＃34;被认为是非生产性的＆＃34; google.com＆＃34;被认为是富有成效打开google.com并点击扩展程序图标即可显示＆＃34;高效网站＆＃34;。然后打开facebook.com并点击图标显示＆＃34;高效网站＆＃34;。关闭弹出窗口并再次正确打开它会显示＆＃34;非生产性网站＆＃34;。

我认为这是问题所在：虽然我在加载其余的html内容之前先调用popup.js脚本，但获取信息需要更长的时间。当它返回时，弹出内容已经使用先前已知的文本加载＆＃34;生产/非生产性＆＃34;。

这是我第一次使用javascript或html，所以我很丢失。任何帮助是极大的赞赏。谢谢！

popup.html：

<script src="popup.js"></script>
<html>
<head>
    <title>Site Popup</title>
</head>
<body>
    <p> This text should change: </p>
    <p id = "test" > text</p>
</body>
</html>

popup.js：

chrome.runtime.getBackgroundPage(function (backgroundPage) {
  if (backgroundPage.getSite()) {
   document.getElementById("test").innerHTML = "Unproductive Site";
  } else {
  document.getElementById("test").innerHTML = "Productive Site";

background.js中的相关代码：

var hostName
function getCurrentTab() {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var tab = tabs[0];
    var tabURL = tab.url; // gets url of current tab
    hostName = getHostName(tabURL);  // gets host name of the url
  } 
  )};

function getSite() {   // used in popup.js
  getCurrentTab();
  return isUnproductiveSite(hostName); // checks if the current hostName is one of the listed "unproductive" sites.
                                       // Returns true if unproductive, false if not.
}

更新（回应评论）

你是对的，我没有考虑它的异步方面。但是，我仍然对如何传递这些值感到困惑。我更多地了解了回调函数，但在我的具体案例中它们并没有帮助。我意识到代码可以简化为：

background.js

function getCurrentTab() {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var tab = tabs[0];
    var tabURL = tab.url;
    var hostName = getHostName(tabURL);
    var isUnprod = isUnproductiveSite(hostName)
  }
  )};

popup.js

chrome.runtime.getBackgroundPage(function (backgroundPage) {
    var result = backgroundPage.getCurrentTab());

popup.js中的实际结果是未定义的，我意识到这是因为getCurrentTab没有任何东西可以返回。我的问题是：如何将isUnprod的值发送到popup.js？我尝试使用回调函数，但它没有帮助将值从background.js传递给popup.js

再次感谢您的帮助。

更新chrome扩展弹出文本

0 个答案: