瀏覽器擴展V3開發系列之 chrome.runtime 的用法和案例

【作者主頁】：小魚神1024

【擅長領域】：JS逆向、小程序逆向、AST還原、驗證碼突防、Python開發、瀏覽器插件開發、React前端開發、NestJS后端開發等等

chrome.runtime API 提供了一系列的方法和事件，可以通過它來管理和維護 Chrome 擴展的生命周期、消息傳遞、獲取清單（manifest）等

掌握它，是瀏覽器擴展開發必不可少的。我們一起看看它有那些用法吧。
先新建一個 popup.html，因為本節主要學習 chrome.runtime 相關知識，popup.html 內容隨便編寫就行，如下即可：
image.png

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>chrome.runtime</title></head><body><p>chrome.runtime</p></body></html>

然后，新建 manifest.json 配置文件
image.png

{"manifest_version": 3,"name": "chrome.runtime","description": "chrome.runtime API 基礎用法","version": "1.0","action": {"default_popup": "popup.html","default_icon": "icons/icon128.png"},"background": {"service_worker": "background.js"}
}

其他配置項應該都好理解，service_worker 是服務工作線程，可以在擴展后臺運行，可以理解為“后端”服務。

既然配置了 service_worker，我們在根目錄還缺一個 background.js 文件。
新建 background.js 如下：
image.png

chrome.runtime.onInstalled.addListener(function () {console.log("插件已安裝");
});

ok，我們基礎擴展開發完成了。在瀏覽安裝成功后，如下：
image.png

chrome.runtime.onInstalled.addListener(listener)

點擊 Service Worker 后，彈出的 DelTools 就能看到打印出： 插件已安裝
說明 chrome.runtime.onInstalled 監聽的事件，在擴展安裝時會執行一次。
image.png

當刷新或者更新擴展時， chrome.runtime.onInstalled 監聽的事件依然會執行。
5.gif

這里點擊刷新按鈕后，其實相當于是：先卸載擴展，再重新安裝擴展，后續就有體現。

當我們需要擴展安裝成功后，立即做一些任務（邏輯），chrome.runtime.onInstalled 就是很好的選擇了。
注意：它只有在初次安裝擴展、或者更新擴展時才執行一次，后續將不在執行！

2、chrome.runtime.onStartup.addListener(listener)

chrome.runtime.onStartup 從名稱上大概就能猜出來，其實瀏覽器啟動時，執行其監聽的事件。
我們在 background.js 中添加如下代碼：
image.png


chrome.runtime.onInstalled.addListener(function () {console.log("插件已安裝");
});chrome.runtime.onStartup.addListener(function () {console.log("瀏覽器重新啟動");
});

當我們重新啟動瀏覽器，打開擴展程序的 DevTools 調試面板可以看到，已經打印出： 瀏覽器重新啟動
image.png

當我們需要擴展每次打開瀏覽器時執行一些任務（邏輯），chrome.runtime.onStartup 是不錯的選擇。
注意：它只有在瀏覽器重新啟動時才執行一次。

3、chrome.runtime.setUninstallURL(url, callback?)

它的作用是：卸載擴展時打開指定URL，通常用于展示問卷調查。
那我們也嘗試驗證下吧。
我們想在卸載時，跳轉到一個問卷調查頁面（我們也沒有啊）。那就先跳轉到百度界面，驗證其功能即可
image.png

// 安裝、更新時執行
chrome.runtime.onInstalled.addListener(function () {console.log("插件已安裝");
});// 瀏覽器重新啟動時執行
chrome.runtime.onStartup.addListener(function () {console.log("瀏覽器重新啟動");
});// 卸載時執行
chrome.runtime.setUninstallURL("https://www.baidu.com/",function () {console.log("插件已卸載");}
);

我先驗證下刷新按鈕的功能：
5.gif
能清楚的看到，點擊刷新按鈕后，先執行了卸載，然后再執行了安裝操作。

5.gif
當卸載擴展后，立刻就跳轉到了百度界面。

4、chrome.runtime.getURL(path)

它的作用：將一個擴展內部的相對路徑轉換為完整的 URL

如果我們想獲取 background.js 的完整路徑時，可以這樣寫：
image.png

// 獲取 background.js 的絕對路徑
const url = chrome.runtime.getURL("background.js")
console.log("url", url)

打印的結果：
image.png

同樣的，也可以獲取 pupup.html 的擴展內部路徑：
image.png

const popup_url = chrome.runtime.getURL("popup.html")console.log("popup_url", popup_url)

Service Worker 打印結果為：image.png
那小伙伴可能問了，拿到資源（js、css、html、jpg等等）的 url 有什么作用呢？

其實，作用很簡單，就使用它們。比如，如果我們想在擴展安裝成功后，立即打開一個popup.html窗口，實現如下：
image.png

// 安裝成功，立即打開一個popup窗口
chrome.runtime.onInstalled.addListener(function () {chrome.tabs.create({ url: chrome.runtime.getURL("popup.html") });
});

這里我們使用了 chrome.tabs API，可以用它打開一個新窗口，后續會講到。使用tabs之前要在manifest.json聲明它，如下:
image.png

{"manifest_version": 3,"name": "chrome.runtime","description": "chrome.runtime API 基礎用法","version": "1.0","action": {"default_popup": "popup.html","default_icon": "icons/icon128.png"},"background": {"service_worker": "background.js"},"permissions": ["tabs"]
}

效果如下：
5.gif
當我們需要用到資源路徑時，chrome.runtime.getURL(path) 絕對是一個不錯的選擇。

5、chrome.runtime.getManifest()

它的作用是：返回當前擴展清單文件的詳細信息。

比如我們要獲取擴展的版本信息：
image.png

// manifest 配置信息
const manifest_info = chrome.runtime.getManifest();
console.log("manifest_info", manifest_info);const { version } = manifest_info;
console.log("version", version);

打印結果：
image.png

6、chrome.runtime.sendMessage

在擴展中，總會用到擴展頁面、內容腳本和工作服務線程之間互相通信，這個時候就會用到了 chrome.runtime.sendMessage(message, callback?) 和 chrome.runtime.onMessage.addListener(listener) 了，前者是發送消息，后者是接收消息。

舉個例子，當擴展頁面加載完成時，發送一個消息，在后臺服務中接收并打印。
首先，在根目錄新建 popup.js ，內容如下：
image.png

// 當前頁面加載完成后
document.addEventListener("DOMContentLoaded", function () {// 發送消息chrome.runtime.sendMessage({ message: "hello" }, function (response) {console.log("收到來自接收者的回復：", response);});
});

然后在 popup.html 中引入，如下：
image.png

在后臺服務 background.js 中接收：
image.png

打印效果如下：
5.gif

其中形參：

  • message：這是發送的消息，可以是任意類型。
  • sender：包含關于消息發送者的信息，例如哪個標簽頁發送的，哪個擴展發送的等。
  • sendResponse：用于向發送者回復一個消息。如果這個函數在事件監聽器中返回了 true，那么表示異步回復

代碼地址：傳送門

總結
  • 首次安裝或者更新時執行，用 chrome.runtime.onInstalled.addListener(listener) 監聽
  • 瀏覽器啟動時執行，用 chrome.runtime.onStartup.addListener(listener) 監聽
  • 卸載時執行并跳轉，用 chrome.runtime.setUninstallURL(url, callback?)
  • 獲取擴展內部絕對路徑時，用 chrome.runtime.getURL(path)
  • 獲取擴展清單時，用 chrome.runtime.getManifest()
  • 后臺服務監聽消息、腳本或擴展頁面發送消息是，用 chrome.runtime.onMessage.addListener(listener) 和 chrome.runtime.sendMessage(message, callback?)

創作不易，動動您發財的小手，點贊關注一波，支持我創作更多對您有幫助的文章！

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/35307.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/35307.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/35307.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

讓GNSSRTK不再難【第14講-第二部分】

讓GNSSRTK不再難【第14講-第二部分】

14.1.2 多個系統多個頻率 在 10.3 節中，我們介紹了衛星碼偏差產生原因，信號發出的是天線相位中心，而不是信號發生器。同樣的，對于接收機也存在相同的問題，即從模擬機的天線相位中心到內部信號跟蹤環路這段的時延我們是無法知曉的。 如果多個系統僅僅使用一個地點進行定位…
閱讀更多...
什么！你還不會Redis？跟著我講透Redis【上篇之初識與安裝】

什么！你還不會Redis？跟著我講透Redis【上篇之初識與安裝】

1 NoSQL是什么 1.1 NoSQL數據庫概述 NoSQL(NoSQL Not Only SQL )&#xff0c;意即”不僅僅是SQL“&#xff0c;泛指非關系型的數據庫。 NoSQL 不依賴業務邏輯方式存儲&#xff0c;而以簡單的key-value模式存儲。因此大大的增加了數據庫的擴展能力。 不遵循SQL標準。不支持A…
閱讀更多...
PKG打包sqlite3項目，如何添加node_sqlite3.node依賴

PKG打包sqlite3項目，如何添加node_sqlite3.node依賴

項目地址&#xff1a;https://github.com/helson-lin/pkg_sqlite 在ffandown項目內&#xff0c;由于項目使用了sqlite3&#xff0c;在跨平臺打包的時候&#xff0c;除了本機外其他平臺打包之后運行缺少node_sqlite3.node依賴。 為了解決問題&#xff0c;百度了很久&#xff0c…
閱讀更多...
構建RESTful API：PHP框架中的實踐與策略

構建RESTful API：PHP框架中的實踐與策略

隨著Web服務的興起&#xff0c;RESTful API成為前后端分離架構中的關鍵組件。PHP作為一種廣泛使用的服務器端腳本語言&#xff0c;通過各種現代框架提供了構建RESTful API的強大工具和靈活性。本文將詳細介紹如何在PHP框架中實現RESTful API&#xff0c;探討設計原則、實現步驟…
閱讀更多...
NLP 相關知識

NLP 相關知識

NLP 相關知識 NLPLLMPrompt ChainingLangChain NLP NLP&#xff08;Natuarl Language Processing&#xff09;是人工智能的一個分支&#xff0c;中文名自然語言處理&#xff0c;專注于處理和理解人類使用的自然語言。它涵蓋了多個子領域&#xff0c;如文本分類、情感分析、機器…
閱讀更多...
思維導圖麒麟liunx系統

思維導圖麒麟liunx系統

系統管理與計劃任 ” 使用at命令提交任務。 6.2.1 at任務概述 6.1.4 定時任務的使用場景 at任務是指使用at命令安排的&#xff0c;只執行一次的任務它允許用戶指定在未來某個特定時間執行命令或腳本定時更新系統軟件包。定時清理系統臨時文件。自動備份文件和數據庫。 at:用于一…
閱讀更多...
pytorch 源碼閱讀(2)——torch._dynamo.optimize

pytorch 源碼閱讀(2)——torch._dynamo.optimize

0 torch._dynamo.optimize(backend, *, nopython, guard_export_fn, guard_fail_fn, disable, dynamic)&#xff0c;TorchDynamo 的主入口點 1 參數說明 backend&#xff0c;一般有兩種情況&#xff1a; 一個包含 torch.fx.GraphModule 和 example_inputs&#xff0c;返回一個…
閱讀更多...
【websocket】websocket網課視頻記錄

【websocket】websocket網課視頻記錄

僅個人方便回顧。 【WebSocket入門與案例實戰-嗶哩嗶哩】 https://b23.tv/2p1f9t2 課程對應代碼倉庫: https://gitee.com/duoli-java/websocket-demo.git
閱讀更多...
C++編程（二）引用

C++編程（二）引用

文章目錄 一、C中的引用&#xff08;一&#xff09;引用1. 語法格式2. 作用3. 注意事項 &#xff08;二&#xff09;常引用2. 其他場景 &#xff08;三&#xff09;引用和函數結合使用1. 引用可以作為函數的參數2. 引用可以作為函數的返回值 &#xff08;四&#xff09;引用和指…
閱讀更多...
在 C/C++ 中使用 popen去執行linux命令樣例，失敗場景

在 C/C++ 中使用 popen去執行linux命令樣例，失敗場景

在 C/C 中使用 popen 函數去執行 Linux 命令是一種常見的方式&#xff0c;但確實存在多種可能導致失敗的場景。以下是一些可能導致 popen 失敗的常見原因和樣例&#xff1a; 命令不存在或路徑錯誤&#xff1a; 如果你嘗試執行的命令不存在于系統的 PATH 環境變量中&#xff0c;…
閱讀更多...
記因hive配置文件參數運用不當導致 sqoop MySQL導入數據到hive 失敗的案例

記因hive配置文件參數運用不當導致 sqoop MySQL導入數據到hive 失敗的案例

sqoop MySQL導入數據到hive報錯 ERROR tool.ImportTool: Encountered IOException running import job: java.io.IOException: Hive exited with status 64 報錯解釋&#xff1a; 這個錯誤表明Sqoop在嘗試導入數據到Hive時遇到了問題&#xff0c;導致Hive進程異常退出。狀態碼…
閱讀更多...
HarmonyOS Next開發學習手冊——通過startAbility拉起文件處理類應用

HarmonyOS Next開發學習手冊——通過startAbility拉起文件處理類應用

使用場景 開發者可以通過調用startAbility接口&#xff0c;由系統從已安裝的應用中尋找符合要求的應用來實現打開特定文件的意圖&#xff0c;例如&#xff1a;瀏覽器下應用下載PDF文件&#xff0c;可以調用此接口選擇文件處理應用打開此PDF文件。開發者需要在請求中設置待打開…
閱讀更多...
三個方法計算兩張圖片的相似度

三個方法計算兩張圖片的相似度

import cv2 import numpy as np from skimage.metrics import structural_similarity as ssim import osdef is_similar(image1, image2, threshold0.95):對圖像的顏色信息敏感&#xff0c;能快速計算。對圖像的旋轉、縮放等幾何變換不敏感。缺點:對圖像的結構、紋理等信息不敏…
閱讀更多...
0625_ARM2

0625_ARM2

練習&#xff1a; 匯編實現1-100累加&#xff0c;結果保存在r0 .text .global _start start:mov r0,#0mov r1,#1b loop loop:add r0,r0,r1add r1,r1,#1cmp r1,#101bne loop .end思維導圖&#xff1a;
閱讀更多...
C#——SortedList 排序列表詳情

C#——SortedList 排序列表詳情

SortedList 排序列表 SortedList 類用來表示鍵/值對的集合&#xff0c;這些鍵/值對按照鍵值進行排序&#xff0c;并且可以通過鍵或索引訪問集合中的各個項。 我們可以將排序列表看作是數組和哈希表的組合&#xff0c;其中包含了可以使用鍵或索引訪問各項的列表。如果您使用索…
閱讀更多...
tensorflow學習1.3-創建會話，啟動會話

tensorflow學習1.3-創建會話，啟動會話

tensorflow學習1.3-創建會話&#xff0c;啟動會話 會話的由來與作用由來作用 會話的定義與結構定義 用法基本用法上下文管理器執行部分計算圖獲取多個結果 總結 練習代碼報錯原因&#xff1a;TensorFlow 2.x中的Eager Execution使用兼容模式來啟用SessionEager Execution和計算…
閱讀更多...
AI文檔助手：提升文檔處理效率

AI文檔助手：提升文檔處理效率

隨著人工智能技術的飛速發展&#xff0c;AI文檔助手已經成為我們提升工作效率的重要工具。小編就來和大家分享幾款AI文檔助手&#xff0c;它們能夠通過智能化的功能幫助我們快速、準確地完成各種文檔任務。 1.百度文庫AI助手 百度文庫AI助手是百度基于文心一言重構的一站式智能…
閱讀更多...
全景圖片/老照片/動漫圖片一鍵無損放大與修復

全景圖片/老照片/動漫圖片一鍵無損放大與修復

在日常生活中&#xff0c;我們經常使用系統自帶的圖片處理軟件來對圖片進行縮放操作&#xff0c;從而實現放大或縮小圖片。然而&#xff0c;這種方法會帶來一個問題&#xff1a;如果原始圖片較小&#xff0c;放大后會導致精度損失&#xff0c;使圖片變得模糊。 近年來&#xf…
閱讀更多...
vue uniapp MEQX JWT認證

vue uniapp MEQX JWT認證

1.下載依賴 npm install mqttimport * as mqtt from "mqtt/dist/mqtt.min" ? 我是用的uniapp vue3 vite這里嘗試了很多方式,都導入不進去后來我就采用的本地引入方式, 把mqtt.min.js下載到本地然后在index.html 中導入<script src"./MEQX/mqtt.js" typ…
閱讀更多...
rapidocr-onnxruntime庫及在open-webui上傳PDF 圖像處理 (使用 OCR)應用

rapidocr-onnxruntime庫及在open-webui上傳PDF 圖像處理 (使用 OCR)應用

背景 rapidocr-onnxruntime是一個跨平臺的OCR庫&#xff0c;基于ONNXRuntime推理框架。 目前已知運行速度最快、支持最廣&#xff0c;完全開源免費并支持離線快速部署的多平臺多語言OCR。 緣起&#xff1a;百度paddle工程化不是太好&#xff0c;為了方便大家在各種端上進行oc…
閱讀更多...
最新文章

Copyright @ 2022~2023