google瀏覽器外掛開發

张占岭發表於2024-04-28

專案結構

在開發Chrome外掛時，以下幾個檔案的作用如下：

manifest.json：這是Chrome外掛的清單檔案，用於配置外掛的基本資訊、許可權、頁面跳轉等。其中包括外掛的名稱、版本號、圖示、後臺指令碼、瀏覽器動作等資訊。
background.js：這是Chrome外掛的後臺指令碼檔案，用於處理外掛的後臺邏輯。可以監聽事件、與瀏覽器進行互動、執行一些後臺任務等。在manifest.json中指定了background指令碼後，它會在外掛載入時自動執行。
popup.html：這是Chrome外掛點選後彈出的介面的HTML檔案。可以定義外掛彈出頁面的結構、樣式和互動邏輯。
popup.js：這是Chrome外掛彈出頁面的JavaScript檔案，用於定義外掛彈出頁面的互動邏輯。在popup.html中引入popup.js，可以實現點選外掛按鈕後彈出頁面的功能。

以上檔案各自承擔不同的角色，在Chrome外掛開發中起著重要的作用。合理地編寫和組織這些檔案可以幫助你實現所需的功能並提升使用者體驗。希望這些解釋對你有所幫助。

manifest.json(v2版本)

{
  "manifest_version": 2,
  "name": "lind-kc",
  "version": "1.0.1",
  "description": "lind-kc-pid",
  "author": "lind",
  "permissions": [
    "tabs",
    "<all_urls>",
    "webRequest",
    "webRequestBlocking",
    "storage",
    "cookies",
    "system.cpu",
    "system.memory",
    "system.storage",
    "system.display"
  ],
  "browser_action": {
    "default_icon": "icon-16.png",
    "default_title": "點選登入系統"
  },
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": true
  },
  "web_accessible_resources": [
    "popup.html",
    "popup.js"
  ]
}

popup.html和popup.js

如果沒有自定義表單，點圖示就執行外掛，這塊就不需要了。

background.js

這是核心程式碼，控制瀏覽器的行為，比如攔截請求，修改請求頭，修改響應頭，修改響應內容等等。

// 監聽訊息
chrome.browserAction.onClicked.addListener(function (tab) {
    // 在這裡處理收到的登入訊息
    var machine = [];
    chrome.system.cpu.getInfo(function (info) {
        machine.push(info.archName);
        machine.push(info.numOfProcessors);
        machine.push(info.modelName);
        chrome.system.memory.getInfo(function (memory) {
            machine.push(memory.capacity);
            chrome.system.display.getInfo(function (dis) {
                var diss = "";
                dis.forEach(function (d) {
                    machine.push(d.id);
                });
                chrome.system.storage.getInfo(function (storageInfo) {
                    var storages = "";
                    storageInfo.forEach(function (storage) {
                        machine.push(storage.id);
                    });
                    chrome.cookies.set({
                        url: "https://cas.xxx.com/auth/",
                        name: "kc-token",
                        value: machine.join("_"),
                        domain: ".xxx.com",
                        path: "/",
                        secure: true,
                        httpOnly: true,
                        expirationDate: Math.floor((new Date().getTime() / 1000) + 3600) // 設定cookie過期時間
                    });

                });
            });

        });
    });
});

獲取客戶硬體資訊

chrome.system.memory：用於獲取系統記憶體資訊，如總記憶體量、可用記憶體量等。
chrome.system.storage：用於獲取儲存裝置（如硬碟、隨身碟）的資訊，包括容量、可用空間等。
chrome.system.display：用於獲取顯示器資訊，如解析度、縮放比例等。
chrome.system.network：用於獲取網路資訊，如網路連線狀態、IP地址等。
chrome.system.power：用於獲取電源資訊，如電池狀態、剩餘電量等。

這些API可以幫助開發者在Chrome外掛中獲取硬體相關的資訊，以便實現更豐富的功能和使用者體驗。在使用這些API時，同樣需要在manifest.json檔案中宣告相應的許可權，例如：

{
  "permissions": [
    "system.memory",
    "system.storage",
    "system.display",
    "system.network",
    "system.power"
  ]
}

透過合理地利用這些硬體資訊介面，你可以為你的Chrome外掛新增更多實用的功能，提升使用者體驗。如果有特定的硬體資訊需求，建議查閱官方文件以獲取更詳細的資訊和使用方法。

當使用Chrome Extension API中的chrome.system.memory和chrome.system.storage模組來獲取客戶端硬碟和記憶體的詳細資訊時，可以參考以下屬性和方法：

chrome.system.memory

chrome.system.memory.getInfo()：獲取系統記憶體資訊。
- capacity：系統總記憶體容量（以位元組為單位）。
- availableCapacity：系統可用記憶體容量（以位元組為單位）。

示例程式碼：

chrome.system.memory.getInfo(function(info) {
    console.log('總記憶體容量：', info.capacity);
    console.log('可用記憶體容量：', info.availableCapacity);
});

chrome.system.storage

chrome.system.storage.getInfo()：獲取儲存裝置資訊。
- id：儲存裝置的唯一識別符號。
- name：儲存裝置的名稱。
- type：儲存裝置型別（如固態硬碟、機械硬碟等）。
- capacity：儲存裝置總容量（以位元組為單位）。
- availableCapacity：儲存裝置可用容量（以位元組為單位）。