技術標籤：前端chrome擴充套件程式

學習資料

chrome擴充套件及應用開發.epub： https://download.csdn.net/download/wangs0622/15228021

manifest.json 檔案

{
    "manifest_version": 2,
    "name": "WS_Demo",
    "version": "0.1",
    "description": "chrome 擴充套件 demo",
    "icons"
 
: { // 這個 icons 裡面定義的圖片是用於 “擴充套件程式” 頁，擴充套件程式的圖示 chrome://extensions/
        "16": "image3/icon48.png",
        "48": "image3/icon48.png",
        "128": "image3/icon128.png"
    },
    "browser_action": {
        "default_icon"
 
: { // 這個圖示是用於瀏覽器右上角的擴充套件程式展示圖示
            "19": "image/icon.png",
            "38": "image/icon.png"
        },
        "default_title": "WS Demo Default Title", // 滑鼠放在瀏覽器右上角的擴充套件程式上時，展示的提示資訊
        "default_popup": "popup.html"
 
 // 定義 點選瀏覽器右上角的圖示 時，彈出的介面
    },
    "content_scripts": [ // 用於瀏覽器訪問的介面的 js
        {
            "matches": ["*://www.baidu.com/"],
            "js": ["js/cannotTouch.js"]
        }
    ]
}

動態設定屬性

// 設定標題
chrome.browserAction.setTitle({title: 'This is a new title'});

// 設定 Badge
chrome.browserAction.setBadgaText({ text: 'Badge' });

// 設定 badge 的背景顏色
chrome.browserAction.setBadgeBackgroundColor({color: '#0000FF'});

Badge 就是擴充套件程式圖示下方的提示資訊，大概能顯示4 個英文呢字元。