瀏覽器擴展開發系列教程(一)

来源:https://www.cnblogs.com/taoshihan/archive/2022/11/19/16905885.html
-Advertisement-
Play Games

以谷歌內核的瀏覽器擴展,包括 edge chrome ,還有我們常用的國產瀏覽器都能使用 瀏覽器擴展是一種軟體,以增強Chrome內核瀏覽器的功能。瀏覽器擴展使用HTML、JavaScript、CSS和圖片等Web技術開發。 瀏覽器擴展與瀏覽器插件不同。瀏覽器擴展無需瞭解瀏覽器的源代碼,而瀏覽器插件 ...


以谷歌內核的瀏覽器擴展,包括 edge chrome ,還有我們常用的國產瀏覽器都能使用

瀏覽器擴展是一種軟體,以增強Chrome內核瀏覽器的功能。瀏覽器擴展使用HTML、JavaScript、CSS和圖片等Web技術開發。

瀏覽器擴展與瀏覽器插件不同。瀏覽器擴展無需瞭解瀏覽器的源代碼,而瀏覽器插件是更底層的瀏覽器功能擴展,需要深入掌握瀏覽器的源代碼。

以谷歌內核的瀏覽器擴展的基本組成

瀏覽器擴展,至少包括一個manifest.json和一個js文件

  • manifest.json是擴展的調度中心,用於聲明各種資源。該文件採用JSON格式定義
  • js文件中定義要執行的操作

瀏覽器擴展,通常還可以包括圖標、頁面和CSS等資源

  • 圖標通常是19px*19px的PNG文件
  • 頁面通常是HTML文件,用於定義顯示給用戶的視窗,如popup頁面或options頁面等

註意:控制popup視窗或options視窗的分別是popup.js和options.js文件

  • CSS是常見的定義頁面樣式的文件

作為一個瀏覽器擴展,上述所有文件應該都位於一個根目錄之下,各個不同類型的文件可以位於不同的子目錄下。

3.瀏覽器擴展的部署運行

瀏覽器擴展的運行無需依賴任何Web伺服器。Chrome 瀏覽器可以方便地進行部署、測試和運行。未打包之前是以下麵形式安裝。

 

 下麵是個示例

{  
    "name": "demo",  
    "version": "1.0.0",  
    "manifest_version": 2,  
    "description": "demo", 
    "permissions" : ["tabs","http://*/"],
    "icons": {  
        "48": "icon.png"  
    }, 
    "content_scripts":[{
        "matches":["http://*/*"],
        "js":["jquery.min.js", "content_script.js"]
    }],
    "browser_action": {  
      "default_icon": "icon.png",  
      "default_popup": "popup.html"  
    }
}  

name就是程式名稱

version是版本

manifest_version是2(如果是1會提示版本低)

description是擴展描述

permissions是許可權,後面是匹配的網址。

icons是圖標

content_scripts是載入的js

browser_action這是顯示在瀏覽器插件欄的icon以及點擊icon彈出的頁面

十年開發經驗程式員,離職全心創業中,歷時三年開發出的產品《唯一客服系統》

一款基於Golang+Vue開發的線上客服系統,軟體著作權編號:2021SR1462600。一套可私有化部署的網站線上客服系統,編譯後的二進位文件可直接使用無需搭開發環境,下載zip解壓即可,僅依賴MySQL資料庫,是一個開箱即用的全渠道線上客服系統,致力於幫助廣大開發者/公司快速部署整合私有化客服功能。 開源地址:唯一客服(開源學習版) 官網地址:唯一客服官網
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 面試官: 小伙子,我看你簡歷上寫的項目中用到了線程池,你知道線程池是怎樣實現復用線程的? 這面試官是不是想坑我?是不是擺明瞭不讓我通過? 難道你不應該問線程池有哪些核心參數?每個參數具體作用是什麼? ...
  • 一 演算法複雜度 演算法複雜度分為時間複雜度和空間複雜度。時間複雜度是指執行演算法所需要的計算工作量;而空間複雜度是指執行這個演算法所需要的記憶體空間。 演算法的複雜性體運行該演算法時的電腦所需資源的多少,電腦資源最重要的是時間和空間(即寄存器)資源,因此複雜度分為時間和空間複雜度。 二 時間複雜度 2.1 ...
  • 摘要 在Prism中彈出一個對話框,預設是一個Windows預設樣式的視窗,會與自己所開發的項目完全不搭配,例如下麵這樣子 如果為了迎合軟體主體風格,可以做出類似這樣效果 其實原理也很簡單,Prism也考慮到了這一點,所以特意設計一個供用戶自定義的介面 編寫組件樣式 1、新建一個Window視圖 註 ...
  • 大家都用過Linux中的應用程式安裝工具,如yum、apt、rpm等工具進行安裝自己想要的一些工具或則軟體之類的,當然Linux操作系統還是很強大的有很多類似的命令來安裝我們所需要的程式,但是windwos有沒有類似於windows這樣的應用安裝程式呢?想必大家看標題就能看的出來肯定是有的,那就是微 ...
  • //源文件 void ADCPhyConfig() { RCC->APB2ENR |=1 <<8; //使能 ADC1 時鐘 RCC->AHB1ENR |=1 <<0; //使能 PORTA 時鐘 //PA5 輸入模式、下拉、高速 GPIOA->MODER |= (3<<5*2); //輸入模式 G ...
  • 1.打開手機,開發者選項,開啟usb調試 , 無線調試,查看手機ip 2.cmd 測試是否能ping通手機 > ping 192.168.0.102正在 Ping 192.168.0.102 具有 32 位元組的數據:來自 192.168.0.102 的回覆: 位元組=32 時間=283ms TTL=6 ...
  • UTF-8編碼的漢字:少數是漢字每個占用3個位元組,多數占用4個位元組 # GET請求編碼 Chrome會先把URL中非ASCII字元按照某種編碼格式(谷歌瀏覽器是UTF-8)編碼成byte數組後,然後轉成16進位數組,然後在每個16進位數字前加上&分割 eg: 地址欄:http://localhost ...
  • 好家伙, 頂不住了,太多的bug, 本來是想把背景用canvas做成動態的,但是,出現了各種問題 為了不耽誤進度,我們先把一個簡單的登錄註冊界面做出來 來看看效果: (看上去還不錯) 本界面使用Vue2(新建項目的時候記得把less勾上,項目里有用到) 1.項目目錄: 2.MyLogin.vue組件 ...
一周排行
    -Advertisement-
    Play Games
  • 在C#中使用SQL Server實現事務的ACID(原子性、一致性、隔離性、持久性)屬性和使用資料庫鎖(悲觀鎖和樂觀鎖)時,你可以通過ADO.NET的SqlConnection和SqlTransaction類來實現。下麵是一些示例和概念說明。 實現ACID事務 ACID屬性是事務處理的四個基本特征, ...
  • 我們在《SqlSugar開發框架》中,Winform界面開發部分往往也用到了自定義的用戶控制項,對應一些特殊的界面或者常用到的一些局部界面內容,我們可以使用自定義的用戶控制項來提高界面的統一性,同時也增強了使用的便利性。如我們Winform界面中用到的分頁控制項、附件顯示內容、以及一些公司、部門、菜單的下... ...
  • 在本篇教程中,我們學習瞭如何在 Taurus.MVC WebMVC 中進行數據綁定操作。我們還學習瞭如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。通過這些步驟,我們成功實現了一個簡單的數據綁定示例。 ...
  • 是在MVVM中用來傳遞消息的一種方式。它是在MVVMLight框架中提供的一個實現了IMessenger介面的類,可以用來在ViewModel之間、ViewModel和View之間傳遞消息。 Send 接受一個泛型參數,表示要發送的消息內容。 Register 方法用於註冊某個對象接收消息。 pub ...
  • 概述:在WPF中,通過EventHandler可實現基礎和高級的UI更新方式。基礎用法涉及在類中定義事件,併在UI中訂閱以執行更新操作。高級用法藉助Dispatcher類,確保在非UI線程上執行操作後,通過UI線程更新界面。這兩種方法提供了靈活而可靠的UI更新機制。 在WPF(Windows Pre ...
  • 概述:本文介紹了在C#程式開發中如何利用自定義擴展方法測量代碼執行時間。通過使用簡單的Action委托,開發者可以輕鬆獲取代碼塊的執行時間,幫助優化性能、驗證演算法效率以及監控系統性能。這種通用方法提供了一種便捷而有效的方式,有助於提高開發效率和代碼質量。 在軟體開發中,瞭解代碼執行時間是優化程式性能 ...
  • 概述:Cron表達式是一種強大的定時任務調度工具,通過配置不同欄位實現靈活的時間規定。在.NET中,Quartz庫提供了簡便的方式配置Cron表達式,實現精準的定時任務調度。這種靈活性和可擴展性使得開發者能夠根據需求輕鬆地制定和管理定時任務,例如每天備份系統日誌或其他重要操作。 Cron表達式詳解 ...
  • 概述:.NET提供多種定時器,如System.Windows.Forms.Timer適用於UI,System.Web.UI.Timer用於Web,System.Diagnostics.Timer用於性能監控,System.Threading.Timer和System.Timers.Timer用於一般 ...
  • 問題背景 有同事聯繫我說,在生產環境上,訪問不了我負責的common服務,然後我去檢查common服務的health endpoint, 沒問題,然後我問了下異常,timeout導致的System.OperationCanceledException。那大概率是客戶端的問題,會不會是埠耗盡,用ne ...
  • 前言: 在本篇 Taurus.MVC WebMVC 入門開發教程的第四篇文章中, 我們將學習如何實現數據列表的綁定,通過使用 List<Model> 來展示多個數據項。 我們將繼續使用 Taurus.Mvc 命名空間,同時探討如何在視圖中綁定並顯示一個 Model 列表。 步驟1:創建 Model ...