美文网首页
chrome 插件开发 环境准备 [1]

chrome 插件开发 环境准备 [1]

作者: proud2008 | 来源:发表于2020-03-23 17:15 被阅读0次

官方
https://developer.chrome.com/extensions/devguide
https://developer.chrome.com/extensions/api_index

谷歌浏览器插件是一种小型的用于定制浏览器体验的程序。通过插件,可以自定义浏览器的一些行为来适应个人的需要,只要你会HTML,JavaScript,CSS就可以动手开发浏览器插件了。

开发谷歌浏览器插件,就相当于在谷歌浏览器的基础之上进行活动,站在巨人的肩膀上,操作很多东西都方便了一些。有了插件,我们可以定制js爬虫、屏蔽网页广告,网页实时查词,修改http请求头,等等,能做的东西很多。

基础概念与入门案例

废话少说,先看一下插件版的hello world,了解插件的大体结构,麻雀虽小,五脏俱全。

  1. 创建manifest.json。任何插件都必须要有这个文件,用来描述插件的元数据,插件的配置信息。
 {
    "name": "Hello Extensions",
    "description" : "Hello world Extension",
    "version": "1.0",
    "manifest_version": 2,
  }

定义当前插件的名字,描述版本号等信息。
注意: version在打包完插件的时候,根据version判断插件是否需要更新。

  1. 给插件加一个浏览器右上角的图标。

    image
 {
     "name": "Hello Extensions",
    "description" : "Hello world Extension",
    "version": "1.0",
    "manifest_version": 2,
#新增内容如下
    "browser_action": {
      "default_popup": "hello.html",
      "default_icon": "hello_extensions.png"
    }
  }

hello.html

<html>
    <body>
      <h1>Hello Extensions</h1>
    </body>
</html>

image.png
  1. 新增快捷键,通过键盘快速打开,修改manifest.json
 {
     "name": "Hello Extensions",
    "description" : "Hello world Extension",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action": {
      "default_popup": "hello.html",
      "default_icon": "hello_extensions.png"
    },

#新增内容如下
   "commands": {
      "_execute_browser_action": {
        "suggested_key": {
          "default": "Ctrl+Shift+F",
          "mac": "MacCtrl+Shift+F"
        },
        "description": "Opens hello.html"
      }
    }
  }

4 permissions 此插件用到的浏览器的权限。常用的权限如下。在Chrome 插件API概览页面点进去,会看到此api需要的权限。

image
"permissions": [
    "tabs",
    "storage",
    "http://*/*",
    "https://*/*"
  ],

5、contentScripts,运行在浏览器网页的上下文页面,使用标准的DOM模型,contentScripts标签在控制台可以看到。

image
 "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "scripts/contentscript.js"
      ],
      "run_at": "document_end",
      "all_frames": false
    }
  ],

6、 background后台页面,在浏览器前台看不到的页面,可以以后台进程的方式进行运行,也可以以事件的方式运行。需要打开扩展程序的开发者模式才能看到。

image
"background": {
    "scripts": [
      "scripts/background.js"
    ]
  },

更详细的manifest.json文件配置信息请参考官方manifest.json文件格式

7、 常用到的开发方式说明

image.png

一般我们会在浏览器的前台页面,也就是直接打开控制台就可以看到的扩展程序,通过contentScript指定加载的程序。在这里监听当前浏览器当前打开的页面,然后做一些与用户交互的东西。

在前台的交互,以消息的形式传递到background指定的脚本。

contentScript执行的程序一般可以跨域,浏览器的安全限制,而background指定的脚本可以跨域运行,获取所有浏览器cookie信息等等。

交互案例,详细的操作看一下项目的脚手架中。

chrome.runtime.sendMessage(string extensionId, any message, object options, function responseCallback)
chrome.runtime.onMessage.addListener(function callback)

一篇有关前后台通信的文章

  1. 在前后台可以通信之后,很多功能可以依赖第三方的库,当前我们参考的脚手架,可以直接使用npm安装第三方库。可以多花点心思研究插件的具体结构。

使用脚手架工具

https://gitee.com/XinGithub/generator-chrome-extension

npm install --global yo gulp-cli bower

# Install the generator:
npm install -g generator-chrome-extension

# Make a new directory, and `cd` get into it:
mkdir my-new-chrome-extension && cd $_

# Generate a new project
yo chrome-extension  
//不要使用sass
//Cannot download "https://github.com/sass/node-sass/releases/download/v3.13.1/win32-x64-64_binding.node":


# Transform updated source written by ES2015 (default option)
gulp babel

# or Using watch to update source continuously
gulp watch  //修改文件后会自动更新到插件

# Make a production version extension
gulp build
//cannot find module 'eslint-scope'
npm i eslint-scope --save

. 安装浏览器扩展

进入扩展程序


image

加载项目目录下的app的文件夹。

image

开发时gulp watch 即可同步


项目结构

修改app下的文件,导入插件也是该文件夹,script脚本修改script.bable下的,babel命令会copy到scripts下


image.png

相关文章

网友评论

      本文标题:chrome 插件开发 环境准备 [1]

      本文链接:https://www.haomeiwen.com/subject/hzcwyhtx.html