chrome開發 extension

我啥時候說啦jj發表於2017-12-27
Chrome

demo地址

先上一張效果圖:

extension_effect.gif

結構

arc.png

幾個概念

extension_effect.gif

從上圖可以看出圍繞在extension中的幾個可見UI元素: icon : extension的預設圖示 badge : 標記,可以顯示最多4個字元的資訊,類似於手機軟體中的未讀訊息數目 toolTip : 右圖中當滑鼠懸浮在 icon 上方時彈出的提示資訊 popup : 使用者點選 icon 時,extension 展示給使用者看的頁面

一個擴充套件需要這麼幾個檔案: manifest.json , popup.html , background.js, icon.png

manifest.json

清單檔案,用於宣告一些後設資料的json格式檔案,可以包含副檔名,描述,版本號,許可權等, 另外, manifest.json 還指明瞭兩個主要檔案: default_popup 和 background -> scripts:

{
    "manifest_version": 2, // 若是是app的話,目前只能固定為2

    // 以下是顯示在 `chrome-settings-extensions` 中的資訊
    "name": "my_extension",
    "version": "1.0",
    "description": "學習js,學習chrome外掛製作demo",

    // 預設圖示,可以設定不同尺寸,chrome會根據實際情況適配
    "icons": {
        "16": "image/chrome.png"
    },

    // 根據google給出的tip,若是在大多數頁面可見的話就用browserAction,否則推薦page_action
    "browser_action": {
        "default_icon": {
            "16": "image/chrome.png"
        },
        "default_title": "Chrome擴充套件demo", //滑鼠懸浮時顯示的提示名稱
        "default_popup": "popup.html" // 點選圖示時彈出的頁面
    },

    // 常駐後臺,可選
    "background": {
        // 指定後臺執行的指令碼
        // 右鍵選單功能選項也可以在裡面新增
        "scripts": [
            "js/background.js"
        ]
    },
    "permissions": [ //許可權限制
        //允許訪問的網站
        "http://flash.weather.com.cn/",
        "https://www.baidu.com/",
        "http://pv.sohu.com/",

        // 將擴充套件加入到右鍵選單中,需要新增 `contextMenus` 許可權
        // 同時還要設定 `icons` 域生命16畫素尺寸的圖示，右鍵選單才會顯示出擴充套件的圖示
        "contextMenus",

        // 新增桌面提醒
        "notifications",

        // 操作cookies,需要新增許可權以及可操作的域(不限制: `<all_urls>`),此處會允許上面生命的幾個域資料
        "cookies"
    ]
}
複製程式碼

default_popup

該屬性指定了使用者點選擴充套件圖示時,瀏覽器會彈出的展示頁面,就是普通的html頁面;
注意: google規定指令碼需要從外部引用,如下面中的 script 標籤就是從外部匯入了 get_info.js;

<html>
<head></head>
<body>
    <div id="ip_div">正在獲取您的ip……</div>
    <div id="weather_div">正在查詢天氣……</div>
    <script src="js/get_info.js"></script>
</body>
</html>
複製程式碼

background.scripts

這個屬性定義了可以在後臺執行的指令碼,指令碼中可以操作 default_popup 定義的展示頁面,定時獲取資料,發出notification等;

icons , browser_action.default_icon

定義顯示的圖示,可有多個尺寸定義,chrome會根據螢幕解析度來選擇或適配;
圖示最大可以被顯示成19dp的方形區域,更大的圖示會動態改變大小以適配;
可以使用普通的圖片檔案也可以使用html5的 canvas element 來動態生成;
可以使用任意WebKit支援的圖片:bmp,gif,ico,jpeg,png等,但對於未解壓的擴充套件包,圖片只能使用png格式;

google tips

For the best visual impact, follow these guidelines:

  • Do use browser actions for features that make sense on most pages.
  • Don't use browser actions for features that make sense for only a few pages. Use page actions instead.
  • Do use big, colorful icons that make the most of the 38x38-pixel space. Browser action icons should seem a little bigger and heavier than page action icons.
  • Don't attempt to mimic Google Chrome's monochrome menu icon. That doesn't work well with themes, and anyway, extensions should stand out a little.
  • Do use alpha transparency to add soft edges to your icon. Because many people use themes, your icon should look nice on a variety of background colors.
  • Don't constantly animate your icon. That's just annoying.

常用方法:

// 設定 extension 的圖示
chrome.browserAction.setIcon({ path: 'image/' + (ifOnline ? 'online.png' : 'offline.png') });

// 設定tooltip
chrome.browserAction.setTitle({ title: "繼續努力" });

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

// 設定badge文字
chrome.browserAction.setBadgeText({ text: "999+" });
複製程式碼

載入extension程式

  1. 在chrome位址列中輸入: chrome://extensions/ 或者通過 settings - extensions 開啟設定頁面;
  2. 啟用 developer mode , 並通過 load unpacked extension... 來載入本地專案資料夾就可以了;
    setting_extension.png

其他操作

notification.gif

建立右鍵選單選項

content_menu.png
1.在 manifest.json 中宣告許可權和icon圖示

{
    "icons": {
        "16": "image/chrome.png"
    },
    "permissions": [ 
        "contextMenus"
    ]
}
複製程式碼

2.在 background.script 指定的指令碼中建立menucontent選項

var link = chrome.contextMenus.create({
    "title": "您選中的是一串文字,點選給出提醒", // 右鍵選單顯示資訊
    "contexts": ["selection"], // 滑鼠選擇文字時才生效
    "onclick": genericOnClick // 點選事件
});
function genericOnClick(info, tab) {
    ...
    showNotification();
}
複製程式碼

建立右下角通知欄

notification.png

1.在 manifest.json 中生命許可權

  "permissions": [ 
        "notifications"
    ]
複製程式碼

2.在 background.script 指定的指令碼中設定notificationId以及options:

var myNotificationId = "100";
function showNotification() {
    var opt = {
        type: "list",
        title: "友情提醒",
        message: "msg",
        iconUrl: "image/chrome.png",
        // 文字列表
        items: [{ title: "1.", message: "五點半該下班了" },
            { title: "2.", message: "記得按時吃飯" }],
        //按鈕功能,設定標題和圖片
        buttons: [{ title: "call", iconUrl: "image/call.png" }, { title: "email", iconUrl: "image/email.png" }]
    }
    //建立並顯示
    chrome.notifications.create(myNotificationId, opt, function (id) { console.log("notifacition created ,id : " + id); })
}
複製程式碼

3.設定按鈕點選事件

chrome.notifications.onButtonClicked.addListener(function (notifId, btnIdx) {
    if (notifId === myNotificationId) {
        if (btnIdx === 0) {//第一個按鈕
            ...
        } else if (btnIdx === 1) {
            ...
        }
    }
});
複製程式碼

4.設定通知框消失監聽事件

chrome.notifications.onClosed.addListener(function () {
    console.log("通知欄已關閉");
});
複製程式碼

申請許可權

確定哪些許可權為可選許可權後,在 manifest.json 中宣告,可選許可權會彈出確認框讓使用者確認:

"optional_permissions": [ "tabs", "http://www.jianshu.com/" ],
複製程式碼

你能宣告的optional許可權有: host permissions, background'bookmarks, clipboardRead, clipboardWrite, contentSettings, contextMenus, cookies, debugger, history, idle, management, notifications, pageCapture, tabs, topSites, webNavigation, webRequest, webRequestBlocking

然後在使用者手勢動作事件中動態申請許可權:

$('#click_div').click(function () {
    chrome.permissions.request({
        permissions: ['tabs'],
        origins: ['http://www.jianshu.com/']
    }, function (granted) {
        // The callback argument will be true if the user granted the permissions.
        alert('result :  ' + granted);
    });
});
// 補充
chrome.permissions.contains(targetPermisson,callback);// 判斷是否擁有某許可權
chrome.permissions.remove(targetPermisson,callback);// 刪除許可權
複製程式碼

相關名詞彙總及資料推薦

manifest.json
browserAction pageAction

圖靈社群 : Chrome擴充套件及應用開發 C好rome Developer's Guide

其他

檢視外掛原始碼

  1. chrome://extensions 檢視對應外掛的id
  2. 在位址列輸入: chrome://version/ ,在 profile path 下面的 extensions/id 目錄中

破解vysor pro 1.7.2

免費版本來夠用的,不過後來換了mbp後,螢幕解析度高了,導致vysor太模糊,基本上不可用狀態,所以不得已就只能考慮破解了: vysor原理以及Android同屏方案 vysor破解方案

  1. 找到vysor安裝目錄: /Users/your_user_name/Library/Application Support/Google/Chrome/Default/Extensions/gidgenkbbabol****bpnhbimgjbffefm/1.7.2_0
  2. 開啟該目錄下的 uglify.js,修改 _il:Te.a() 為 _il:true並儲存
  3. 重啟vysor即可進行pro功能設定

相關文章