Browser Extension

crx

Posted by lanbery on November 26, 2019

Getting Started

Mind Mapping

CRX Message

Knowledge

  • PPAPI (替代chrome-v42 之前的C++动态库调用方案)
  • 网络请求控制
  • 事件监听
  • 通信机制
  • https 认证机制

Chrome Extension 优势,除应用在chrome 上外,还可以运行所有webkit内核的浏览器.

CRX Blog

Develop & Debug

chrome extension 文件夹下需要有manifest.json 文件
勾选开发模式,即可直接加载插件,不必打包成*.crx格式 

manifest.json 核心文件

{
    //清单版本
    "manifest_version":2,
    "name":"basex",
    "version":"1.0.0",
    "description":"Bas Chrome Extendsion",
    "icons":{
        "16":"img/icon.png",
        "48":"",
        "128":""
    },
    //always run process js or background page
    "background":{
        "page":"background.html",
        //"scripts":["js/background.js"]
    },
    //浏览器右上角图标设置,browser_action/page_action/app必须三选一
    "browser_action":{
        "default_icon":"img/icon.png",
        //悬停时的标题,可选.[bas设计:]
        "default_title":"Blockchain Address Service Extendsion",
        //显示余额,wallet simple,query
        "default_popup":"popu.html"
    },
    //当一些特定页面打开才显示的图标
    /**
    "page_action":{
        "default_icon":"img/icon.png",
        ...
    },
    */
    //需要直接注入页面的JS
    "content_scripts":[
        {
            //"matches":["http://*/*","https://*/*"]
            //"<all_urls>" 标识匹配所有地址
            "matches":["<all_urls>"],
            //插入匹配页面的JS
            "js":["js/jqury","js/content-script.js"],
            //css
            "css":["css/sss.css"],
            //代码注入的时间,可选值:"document_start","document_end" or "document_idle" 代表页面空闲时,默认document_idle
            "run_at":"document_idle"
        },
        {
            ....
        }
    ],
    //权限申请
    "permissions":[
        "contextMenus",//右键菜单
        "tab",//标签
        "notifications",//通知
        "webRequest",//web请求
        "webRequestBlocking",
        "storage",//本地存储
        "http://*/*",//可以通过executeScript或insertCss访问的网站
    ],
    //普通页面能够直接访问的插件资源列表,如不设置是无法直接访问的.
    "web_accessible_resources":["js/inject.js"],
    //插件主页
    "homepage_url":"https://www.home.bas",
    ...
    "options_page":"options.html",//chrome 40 之前配置
    //chrome 40 之后用,两个都写,新版本只认第二个
    "options_ui":{
        "page":"options.html",
        "chrome_style":true
    },
    //向地址栏注册一个关键字已提供搜索建议,只能设置一个关键字 ??
    "omnibox":{"keyword":"bas"},
    "default_locale":"zh_CN",
    ...
}    

background 常驻后台的页面,生命周期随着浏览器打开而打开,浏览器关闭而关闭 event-pages 鉴于background生命周期太长,会影响性能,才有event-pages,

{
    "background":{
        "scripts":["event-page.js"],
        "persistent":false//
    }
}

solutions

利用webRequest 拦截bas://xxx协议,阻塞请求 => 到合约查询ip地址或BCAddress 直接返回 http 或 https

Extension folder path

chrome://version

https://github.com/ahwayakchih/crx3

https://judge.sh/how-to-enable-dns-over-https-on-chrome-right-now/

google.com dns:59.24.3.174

Firefox

WexExtension

Signed Extension

Signed

This library allows extensions that use the Promise-based WebExtension/BrowserExt API being standardized by the W3 Browser Extensions group to run on Google Chrome with minimal or no changes.

https://github.com/mdn/webextensions-examples

https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/