Javascript 后台页面生命周期和页面操作

我对JavaScript和Google Chrome的插件开发完全是新手。我正在尝试为它创建我的第一个扩展。我的目标是在wikipedia页面上创建一个简单的JS警报，每次点击都会显示。我的代码如下：

// manifest.json
{
    "name": "My Plugin",
    "version": "0.0.1",
    "manifest_version": 2,

    "description": "My first expirience in plugin development for Google Chrome browser",

    "page_action": {
        "default_icon": "icon.png",
        "default_title": "Action Title"
    },

    "background": { 
        "scripts": ["background.js"] 
    },

    "permissions": [
        "tabs"
    ]
}

// background.js
// Listen for any changes to the URL of any tab.
chrome.tabs.onUpdated.addListener(checkForValidUrl);

// Called when the url of a tab changes.
function checkForValidUrl(tabId, changeInfo, tab) {
  // Show action only for wikipedia pages
  var regex = /wikipedia.org/gi;
  if (tab.url.match(regex)) { 
    chrome.pageAction.show(tabId);
    chrome.pageAction.onClicked.addListener(onClickListener);
  }
};

function onClickListener(tab) {
    alert('Clicked!!!');
}

问题是该警报会在屏幕上多次显示。每次重新加载页面后，它将显示两倍以上。例如：

• 打开页面
• 单击我的插件图标
• 警报显示2次
• 转到下一页
• 点击图标
• 警报显示4次

等等

---

但我希望每次单击仅显示一次警报。我做错了什么？

您可以在加载文档时首先添加侦听器。在触发DOMContentLoaded事件后，您需要添加侦听器：

document.addEventListener('DOMContentLoaded', function() {
    chrome.tabs.onUpdated.addListener(checkForValidUrl);
    //chrome.pageAction.onClicked.addListener(onClickListener); //might need to put this here, it's been a while since I've done a chrome extension, but if you do then just put your conditional for the regex in your onClickListener function
});

    // Called when the url of a tab changes.
function checkForValidUrl(tabId, changeInfo, tab) {
  // Show action only for wikipedia pages
  var regex = /wikipedia.org/gi;
  if (tab.url.match(regex)) { 
    chrome.pageAction.show(tabId);
    chrome.pageAction.onClicked.addListener(onClickListener);
  }
};

function onClickListener(tab) {
    alert('Clicked!!!');
}

---

您可以在加载文档时首先添加侦听器。在触发DOMContentLoaded事件后，您需要添加侦听器：

document.addEventListener('DOMContentLoaded', function() {
    chrome.tabs.onUpdated.addListener(checkForValidUrl);
    //chrome.pageAction.onClicked.addListener(onClickListener); //might need to put this here, it's been a while since I've done a chrome extension, but if you do then just put your conditional for the regex in your onClickListener function
});

    // Called when the url of a tab changes.
function checkForValidUrl(tabId, changeInfo, tab) {
  // Show action only for wikipedia pages
  var regex = /wikipedia.org/gi;
  if (tab.url.match(regex)) { 
    chrome.pageAction.show(tabId);
    chrome.pageAction.onClicked.addListener(onClickListener);
  }
};

function onClickListener(tab) {
    alert('Clicked!!!');
}

---

您正在重复添加侦听器。。。当插件首次加载时，您只需添加一次。请您解释一下我在哪里可以这样做？如何捕捉插件第一次加载的时刻？您正在反复添加侦听器。。。当插件首次加载时，您只需添加一次。请您解释一下我在哪里可以这样做？如何抓住插件第一次加载的时刻？谢谢你的回答，它告诉我在哪里可以找到我需要的东西。在我的情况下，页面内容不满足我只需要页面链接。因此，我需要另一个文档事件，如onPageLoadingStarted。感谢您的回答，它为我指明了查找所需内容的方向。在我的情况下，页面内容不满足我只需要页面链接。因此，我需要另一个类似于onPageLoadingStarted的文档事件。