大同建设银行保安招聘网站,查看网站源代码建站可以,全网有哪些网站可以做淘客,网站开发现状问题背景
最近我在开发Chrome浏览器插件时#xff0c;遇到了一个需要脚本初始化的问题。在插件被安装后或浏览器标签页被刷新时#xff0c;我需要重新初始化插件。为了实现这一点#xff0c;我研究了Chrome提供的几个API接口#xff0c;它们分别是chrome.runtime.onInstal…问题背景
最近我在开发Chrome浏览器插件时遇到了一个需要脚本初始化的问题。在插件被安装后或浏览器标签页被刷新时我需要重新初始化插件。为了实现这一点我研究了Chrome提供的几个API接口它们分别是chrome.runtime.onInstalled.addListener、chrome.runtime.onStartup.addListener以及chrome.tabs.onUpdated.addListener。在本文中我将对这三个关键事件监听器进行梳理并详细说明它们之间的区别。
事件监听器
使用注意项
事件监听器通常是在 background.js 文件中使用因为 background.js 是扩展程序的后台脚本负责管理扩展的生命周期和处理事件。不过也可以在其他 JavaScript 文件中使用事件监听器只是使用一些特殊的方法
1、可以在扩展程序的 manifest.json 中声明多个后台脚本。
{manifest_version: 3,name: My Extension,version: 1.0,background: {service_worker: [background1.js, background2.js]},permissions: [tabs,storage,activeTab,scripting]
}2、通过模块化的方式将事件监听器相关的代码组织到不同的模块中然后在 background.js 中导入和使用这些模块。
// eventHandlers.js
export function setupEventListeners() {chrome.runtime.onInstalled.addListener(() {console.log(Extension installed);});chrome.runtime.onStartup.addListener(() {console.log(Browser startup);});chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) {if (changeInfo.status complete tab.url.includes(https://juejin.cn/)) {console.log(Page loaded: , tab.url);}});
}// background.js
import { setupEventListeners } from ./eventHandlers.js;setupEventListeners();3、虽然内容脚本或其他页面脚本无法直接监听扩展的生命周期事件但是如果需要与后台脚本通信可以使用消息传递的方式。
// contentScript.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) {if (message.action pageLoaded) {console.log(Content script received page loaded message);// 执行相关操作}
});// background.js
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) {if (changeInfo.status complete tab.url.includes(https://juejin.cn/)) {chrome.tabs.sendMessage(tabId, { action: pageLoaded });}
});chrome.runtime.onInstalled.addListener 的应用场景
触发时机
当扩展程序被首次安装时触发。当扩展程序被更新到新版本时触发。当 Chrome 浏览器被更新到新版本时触发扩展程序的清单文件中指定了 manifest_version 为2而不是3。
适用场景
一次性初始化任务适用于在扩展程序安装或更新时执行一次性的初始化任务例如设置初始配置、显示欢迎页面、注册持久性任务等。注册内容脚本在扩展程序安装或更新时可以通过该事件注册内容脚本以便在特定网站上执行 JavaScript 代码。这对于在特定页面上执行定制化操作非常有用。创建上下文菜单可以在安装或更新扩展程序时创建右键菜单项以提供更方便的用户体验。例如可以添加 “在新标签页中打开链接” 的选项。初始化存储设置或重置存储中的初始数据。这对于在扩展程序启动时需要一些默认设置或数据非常有用。
代码示例
chrome.runtime.onInstalled.addListener((details) {if (details.reason install) {console.log(扩展程序已安装);// 执行安装时的初始化任务// 例如设置默认配置chrome.storage.sync.set({color: blue}, function() {console.log(默认颜色设置为蓝色);});} else if (details.reason update) {console.log(扩展程序已更新);// 执行更新时的任务// 例如迁移存储中的旧数据}
});chrome.runtime.onStartup.addListener 的应用场景
触发时机
当 Chrome 浏览器启动时触发包括重新启动。当用户首次启动浏览器并登录他们的 Google 账号或者当用户在已经启动的浏览器中切换到不同的 Chrome 账号时
用途 重复初始化任务适用于在每次浏览器启动时执行初始化任务例如恢复扩展程序的状态、重新注册临时任务等或者在启动时清理上一次运行中留下的数据。 检查并恢复状态在浏览器启动时检查并恢复扩展程序的状态。从存储中读取上次保存的状态并恢复这些状态。例如恢复用户设置的选项恢复上次浏览的页面等。 重新注册动态内容脚本重新注册在运行时添加的内容脚本。这样可以确保内容脚本在目标页面上始终有效。 初始化连接建立必要的连接或重新初始化服务。例如与后台服务器重新建立连接初始化 WebSocket 等。
代码示例
chrome.runtime.onStartup.addListener(() {console.log(Chrome 浏览器已启动或用户已登录);// 恢复扩展程序的状态chrome.storage.sync.get([color], function(result) {if (result.color) {console.log(启动时获取的颜色是 result.color);} else {console.log(没有设置颜色使用默认值);chrome.storage.sync.set({color: blue}, function() {console.log(默认颜色设置为蓝色);});}});// 重新注册动态内容脚本chrome.scripting.registerContentScripts([{id: myContentScript,matches: [https://juejin.cn/*],js: [contentScript.js],runAt: document_end}]);// 初始化连接例如 WebSocketconst socket new WebSocket(wss://xiaodou.com/socket);socket.onopen () {console.log(WebSocket 连接已建立);};socket.onmessage (event) {console.log(收到消息, event.data);};socket.onclose () {console.log(WebSocket 连接已关闭);};
});
chrome.tabs.onUpdated.addListener 的应用场景
触发时机
当标签页的状态更新时触发这包括页面加载开始、页面加载完成、URL 更改等情况。
用途 监听页面更新通过监听标签页的更新事件可以在页面加载开始、加载完成或 URL 发生变化时执行特定操作。例如可以记录用户访问的页面或者在页面加载完成时执行一些数据采集或分析任务。 在特定页面上动态注入脚本或样式可以根据 URL 动态决定是否注入特定的内容脚本或样式表。例如当用户访问某个网站时自动注入脚本来修改页面的外观或功能提升用户体验。 根据页面加载状态更新扩展图标、弹出页面等根据页面的加载状态动态改变扩展程序的图标或者更新弹出页面的内容。例如当用户访问某个特定网站时扩展程序的图标变为特定颜色或者弹出页面显示该网站的特定信息。
代码示例
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) {// 仅在页面加载完成时触发if (changeInfo.status complete tab.url) {// 例如检查是否为特定网站if (tab.url.includes(https://juejin.cn/)) {console.log(页面加载完成: , tab.url);// 动态注入脚本chrome.scripting.executeScript({target: { tabId: tabId },function: () {// 示例向页面注入脚本console.log(在页面上执行脚本);// 在页面右下角添加一个导出按钮const button document.createElement(button);button.textContent 导出;button.style.position fixed;button.style.bottom 10px;button.style.right 10px;button.style.zIndex 1000;document.body.appendChild(button);}});}}
});最后象征性的总结一下就是基本的使用场景如下所示
chrome.runtime.onInstalled.addListener(() {// 执行安装或更新时的一次性初始化任务
});chrome.runtime.onStartup.addListener(() {// 执行每次启动时需要重复进行的任务
});chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) {if (changeInfo.status complete) {// 在特定页面更新完成后执行任务}
});
