項目結構

在開發Chrome插件時，以下幾個文件的作用如下：

1. manifest.json：這是Chrome插件的清單文件，用於配置插件的基本信息、許可權、頁面跳轉等。其中包括插件的名稱、版本號、圖標、後臺腳本、瀏覽器動作等信息。

2. background.js：這是Chrome插件的後臺腳本文件，用於處理插件的後臺邏輯。可以監聽事件、與瀏覽器進行交互、執行一些後臺任務等。在manifest.json中指定了background腳本後，它會在插件載入時自動運行。

3. popup.html：這是Chrome插件點擊後彈出的界面的HTML文件。可以定義插件彈出頁面的結構、樣式和交互邏輯。

4. 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過期時間
                    });

                });
            });

        });
    });
});

獲取客戶硬體信息

1. chrome.system.memory：用於獲取系統記憶體信息，如總記憶體量、可用記憶體量等。

2. chrome.system.storage：用於獲取存儲設備（如硬碟、U盤）的信息，包括容量、可用空間等。

3. chrome.system.display：用於獲取顯示器信息，如解析度、縮放比例等。

4. chrome.system.network：用於獲取網路信息，如網路連接狀態、IP地址等。

5. 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：存儲設備可用容量（以位元組為單位）。

示例代碼：

chrome.system.storage.getInfo(function(storageInfo) {
    storageInfo.forEach(function(info) {
        console.log('存儲設備ID：', info.id);
        console.log('存儲設備名稱：', info.name);
        console.log('存儲設備類型：', info.type);
        console.log('存儲設備總容量：', info.capacity);
        console.log('存儲設備可用容量：', info.availableCapacity);
    });
});

通過以上屬性和方法，你可以在Chrome插件中獲取到客戶端硬碟和記憶體的詳細信息，並根據需要進行相應的處理和展示。如果需要更多關於這些API的信息，建議查閱官方文檔以獲取更全面的指導。

參考：

• https://developer.chrome.com/docs/extensions/develop/migrate/mv2-deprecation-timeline?hl=zh-cn
• https://zhuanlan.zhihu.com/p/640973570

作者：倉儲大叔，張占嶺，
榮譽：微軟MVP
QQ：853066980

支付寶掃一掃，為大叔打賞!