layout: post title: Browser Extension subtitle: firefox add-ons date: 2020-06-22 author: lanbery header-img: img/2019/network_bg.png catalog: true tags: - Browser - ADD-ONs

Firefox Extension (ADD-ON) Develop

Usage Develop Tools

web-ext-webpack-plugin

https://github.com/hiikezoe/web-ext-webpack-plugin

https://github.com/lxieyang/chrome-extension-boilerplate-react

webextension-polyfill

创建要在Firefox和Chrome中使用的扩展程序时，该库使您可以使用基于Firefox Promise的API，并使它们在Google Chrome上运行，并且几乎不用做任何更改。走起

Chrome Extension

chrome.tabs.sendMessage(integer tabId, any message, object options, function responseCallback)

Extension Quick Development boilerplate

https://github.com/lxieyang/chrome-extension-boilerplate-react

Vue extension initial

https://www.streaver.com/blog/posts/create-web-extension-vue

https://github.com/Kocal/vue-web-extension/tree/v1

vue init kocal/vue-web-extension my-extension
vue init kocal/vue-web-extension#v1 my-extension

Firefox 坑

JS

原生扩展 Error.captureStackTrace 报错

function BPError(message, code) {
  this.message = message || 'unknow error.';
  this.name = 'BPError';

  this.code = code || UNKONW_ERROR;

  Error.captureStackTrace(this, BPError);
}

BPError.prototype = new BPError();
BPError.prototype.constructor = BPError;

BPError.prototype.getError = function () {
  return {
    code: this.code,
    message: this.message,
  };
};

USE ES6 ```js class BPError extends Error { constructor(message,code){ super(message); this.name = ‘BPError’; this.code = code || UNKONW_ERROR;

Error.captureStackTrace(this,this.constructor)   }

getError(){ return { code:this.code, message:this.message } } } ```

Fx_add_ons