Chrome活动页面的工作原理如何？ [英] How exactly does a Chrome event page work?

问题描述

来自 developer.chrome.com ：

Chrome会跟踪应用或扩展程序添加侦听器的事件。当它发送这样的事件时，事件页面被加载。相反，如果应用或扩展程序通过调用removeListener来删除某个事件的所有侦听器，则Chrome将不再加载该事件的事件页面。

由于侦听器本身只存在于事件页面的上下文中，每次加载事件页面时都必须使用addListener;所以我注册了一个侦听器，它只存在于事件页面的上下文中。这个侦听器只存在于事件页面的上下文中，然后chrome在事件发生时加载事件页面？如果页面当前被卸载并且因此监听器未定义，它如何激发监听器？最重要的是，我该如何实际实现一个事件页面？

解决方案

要实现事件页面设置，清单的背景部分像这样：

 background：{
scripts：[
 ... 
/scripts/background.js
，
持久性：false 
}，
  

persistent：false 使其成为活动页面。

您的background.js您将添加侦听器和函数，如下所示：

  // event：显示或聚焦选项页面
函数onIconClicked（）{
 bgUtils.showOptionsTab（）; 
 
 
 // event：处理某人更改存储时的状态
函数onStorageChanged（event）{
 bgUtils.processState（event.key）; 
} 
 
 //监听点击图标
 chrome.browserAction.onClicked.addListener（onIconClicked）; 
 
 //监听存储数据的更改
 addEventListener（'storage'，onStorageChanged，false）; 
  

Chrome会自动处理其余的内容。

<注意两点：

不要使用 chrome.extension.getBackgroundPage（），如果您需要访问背景页面。使用 chrome.runtime.getBackgroundPage（）来代替。它是异步的，并确保事件页面被加载。

在事件页面中不能有全局变量。如果您需要保持全局状态，则需要使用其中一个存储API。

From developer.chrome.com:

Chrome keeps track of events that an app or extension has added listeners for. When it dispatches such an event, the event page is loaded. Conversely, if the app or extension removes all of its listeners for an event by calling removeListener, Chrome will no longer load its event page for that event.

Because the listeners themselves only exist in the context of the event page, you must use addListener each time the event page loads; only doing so at runtime.onInstalled by itself is insufficient.

So I register a listener that only exists in the context of the event page, and then chrome loads the event page when that event occurs? How can it fire the listener if the page is currently unloaded and therefore the listener is undefined? And most importantly, how do I actually implement an event page?

解决方案

To implement an event page setup the background section of your manifest like this:

"background": {
    "scripts": [
        ...
        "/scripts/background.js"
    ],
    "persistent": false
},

"persistent": false makes it an event page.

In your background.js you will add listeners and functions like the following:

// event: display or focus options page
function onIconClicked() {
    bgUtils.showOptionsTab();
}

// event: process the state when someone has changed the storage
function onStorageChanged(event) {
    bgUtils.processState(event.key);
}

// listen for click on the icon
chrome.browserAction.onClicked.addListener(onIconClicked);

// listen for changes to the stored data
addEventListener('storage', onStorageChanged, false);

Chrome automagically takes care of the rest.

Two things to note:

DO NOT USE chrome.extension.getBackgroundPage() if you need access to the background page. USE chrome.runtime.getBackgroundPage() instead. It is asynchronous and makes sure the event page gets loaded.

You cannot have global variables in your event page. If you need to persist global state you need to use one of the storage API's.

这篇关于Chrome活动页面的工作原理如何？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！