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

来源: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
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...