谷歌插件

什么是谷歌插件呻引？

谷歌插件，全名谷歌瀏覽器擴(kuò)展程序。那什么是谷歌瀏覽器擴(kuò)展程序靠瞎，官方說明如下：

擴(kuò)展程序允許您為 Chrome瀏覽器增加功能，而不需要深入研究本機(jī)代碼求妹。您可以使用您在網(wǎng)頁開發(fā)中已經(jīng)很熟悉的核心技術(shù)（HTML乏盐、CSS 與 JavaScript）為 Chrome 瀏覽器創(chuàng)建新的擴(kuò)展程序。

擴(kuò)展是 Web 平臺中使用的HTML制恍、CSS父能、JavaScript、圖像和其他文件的壓縮包净神『瘟撸可以修改用戶瀏覽并與之交互中的web內(nèi)容，它們還可以擴(kuò)展和更改瀏覽器本身的行為鹃唯。

配置文件

谷歌插件的核心文件就是配置文件—manifest.json（清單）文件爱榕。其中，manifest.json 文件最基本的 Api 如下:

{
    "name": "chrome extension",
    "version": "1.0.0",
    "manifest_version": 2,
    "description": "A litlle chrome extension demo"
}

主要是包含所寫谷歌插件的名稱坡慌，版本黔酥，以及相關(guān)描述。manifest.json作為谷歌插件的核心部分，個人認(rèn)為該文件對插件來說就相當(dāng)于一個入口配置文件跪者，開發(fā)只需要在這個文件通過配置相應(yīng)的 js棵帽，調(diào)用谷歌瀏覽器提供的Api，來達(dá)到完善這個插件的目的坑夯。
官網(wǎng)詳細(xì)配置鏈接

基本Api使用

google官方提供的Api比較多岖寞，google文檔也做了歸類，大致分為哪些行為操作柜蜈，我們可以根據(jù)行為需求操作去找相應(yīng)的api去做探索與實(shí)踐仗谆。

在清單文件中還有很多 Api 就不一一列舉了，下面只介紹幾個個人認(rèn)為比較重要的幾個 Api淑履，通過以下幾個 Api 可以使得開發(fā)同學(xué)對于谷歌插件的開發(fā)過程有一個大概的認(rèn)識隶垮。

browser_action

{
    ...

    "browser_action": {
        "default_icon": {
          "16": "1.png",
          "32": "1.png"
        },
        "default_title": "demo extension",
        "default_popup": "popup.html"
    },

    ...
}

browser_action 可設(shè)置瀏覽器右上角的圖標(biāo)，名稱秘噪。default_popup 可配置點(diǎn)擊圖標(biāo)后會出現(xiàn)的一個小窗口狸吞，這里可以做一些臨時(shí)性的操作。

permissions

{
    ...

    "permissions": [ "activeTab", "storage", "tabs", "contextMenus" ],
    
    ...
}

permissions 可配置谷歌插件權(quán)限申請指煎，如 contextMenus（右鍵菜單）, tabs（標(biāo)簽）蹋偏，storage（插件本地存儲）。

content_scripts

{
    ...

    "content_scripts": {
        "matches": ["<all_urls>"],
        "css": ["/content.css"],
        "js": ["content.js"]
    },
    
    ...
}

content-scripts至壤，其實(shí)就是谷歌插件中向頁面注入腳本的一種形式（雖然名為 script威始，其實(shí)還可以包括 CSS 的），借助 content-scripts 可以實(shí)現(xiàn)通過配置的方式輕松向指定頁面注入 JS 和 CSS像街。官方解釋：

內(nèi)容腳本允許擴(kuò)展將邏輯注入頁面以讀取和修改其內(nèi)容黎棠。內(nèi)容腳本包含在已加載到瀏覽器中的頁面上下文中執(zhí)行的 JavaScript。

background

{
    ···

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

    ···
}

background一直駐留在瀏覽器后臺的頁面可以時(shí)刻監(jiān)聽瀏覽器的各種行為镰绎。它是一個常駐的頁面脓斩，它的生命周期是插件中所有類型頁面中最長的，它隨著瀏覽器的打開而打開畴栖，隨著瀏覽器的關(guān)閉而關(guān)閉随静，所以通常把需要一直運(yùn)行的、啟動就運(yùn)行的吗讶、全局的代碼放在 background 里面挪挤。

以上，是一些谷歌插件清單文件基本且比較重要的一些 Api关翎。

腳本通信

插件各個模塊下的 js 文件是可以相互通信的扛门，分別是屬于background字段的background.js，content.js纵寝，以及popup.html的js文件popup.js论寨。這三個js文件通過谷歌插件提供的信息交互機(jī)制進(jìn)行通信星立，彼此傳遞信息。

==content.js== 可以訪問當(dāng)前頁面葬凳，但是可能訪問的API受到限制绰垂。例如，它無法偵聽瀏覽器操作的點(diǎn)擊火焰。

==background.js== 該腳本可以訪問每個Chrome API劲装，但無法訪問當(dāng)前頁面。

那么background和content該如何通信呢昌简？

// content 發(fā)出消息
chrome.runtime.sendMessage({ greeting: "content send" }, function (response) {
  console.log("content get response", response);
});
// content 監(jiān)聽消息
chrome.extension.onMessage.addListener((request, sender, sendResponse) => {
  sendResponse({ content: "content get" });
});

// background 監(jiān)聽消息
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  sendResponse({ content: "background get" });

  // background 發(fā)送消息
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    const msg = "background send";
    chrome.tabs.sendMessage(tabs[0].id, msg, function (response) {
      console.log("background get response", response);
    });
  });
});

擴(kuò)展程序及其內(nèi)容腳本之間的通信通過使用消息傳遞進(jìn)行占业。任何一方都可以偵聽從另一端發(fā)送的消息，并在同一通道上響應(yīng)纯赎。chrome提供了簡單請求和長期鏈接谦疾。

經(jīng)過這幾天的了解，我們要使用插件更高級的功能犬金，還是需要了解各個 api 的能力念恍，需要大量的google搜索!

本次分享就基于簡單的分享對谷歌插件的基本知識，敬請下次繼續(xù)分享～

2022-06-16