• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

EmailThis/extension-boilerplate: ⚡️ A template for building cross browser exte ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

EmailThis/extension-boilerplate

开源软件地址:

https://github.com/EmailThis/extension-boilerplate

开源编程语言:

JavaScript 45.3%

开源软件介绍:

Extension Boilerplate

A foundation for creating browser extensions for Chrome, Opera & Firefox.

Now that Firefox supports WebExtensions, it has become a lot easier to build browser extensions/addons for multiple browsers without duplicating the codebase. This project serves as a sensible starting point to help you get started.

I have extracted this from the browser extensions that I built for my side-project, Email This.

Side note: Do check out Email This. It is a simpler alternative to bookmarking tools like Pocket, Readability & Instapaper. Email This will remove ads & distractions from an article and send you a nice email with just the text/images. No need to install any additional applications or login to another app just to access your bookmarks. The Chrome Extensions is available on the Chrome Web Store.

Features

Write once and deploy to Chrome, Opera & Firefox
Based on WebExtensions. It also includes a tiny polyfill to bring uniformity to the APIs exposed by different browsers.
Live-reload
Your changes to CSS, HTML & JS files will be relayed instantly without having to manually reload the extension. This ends up saving a lot of time and improving the developer experience.
Sensible starting point
This comes with a gulp based workflow that converts modern ES6 JavaScript and SCSS to JS/CSS. Scripts are transpiled using Babel and bundled using Browserify. Sourcemaps are available for both JS and SCSS.
Sketch (.sketch) assets for icons and promo images
A .sketch file is included in the resources directory. This has all the icons and promo images that will be needed while uploading the extensions to the app stores.
Easily configurable and extendable
The gulpfile is easily understandable and configurable. If you want to add additional tasks or remove un-used ones, you can easily tweak that file to suit your needs.
Platform specific & Environment specific variables.
You might need to specify different data variables based on your environment. For example, you might want to use a localhost API endpoint during development and a production API endpoint once the extension is submitted to the appstore. You can specify such data in the json files inside `config` directory.
You can also set custom data variables based on the platform (different variable for Chrome, FF, Opera).

Installation

  1. Clone the repository git clone https://github.com/EmailThis/extension-boilerplate.git
  2. Run npm install
  3. Run npm run build

Alternately, if you want to try out the sample extension, here are the download links. After you download it, unzip the file and load it in your browser using the steps mentioned below.

Load the extension in Chrome & Opera
  1. Open Chrome/Opera browser and navigate to chrome://extensions
  2. Select "Developer Mode" and then click "Load unpacked extension..."
  3. From the file browser, choose to extension-boilerplate/build/chrome or (extension-boilerplate/build/opera)
Load the extension in Firefox
  1. Open Firefox browser and navigate to about:debugging
  2. Click "Load Temporary Add-on" and from the file browser, choose extension-boilerplate/build/firefox

Developing

The following tasks can be used when you want to start developing the extension and want to enable live reload -

  • npm run chrome-watch
  • npm run opera-watch
  • npm run firefox-watch

Packaging

Run npm run dist to create a zipped, production-ready extension for each browser. You can then upload that to the appstore.

TODO

  • Add support for Safari
  • Add Firefox & Opera Promo images
  • Add sample screenshot templates
  • Write a guide for using config variables & JS preprocessor

This project is licensed under the MIT license.

If you have any questions or comments, please create a new issue. I'd be happy to hear your thoughts.

Bharani, Email This




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap