前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一天学会Chrome插件开发

一天学会Chrome插件开发

作者头像
疯狂的技术宅
发布2019-03-28 10:13:37
8360
发布2019-03-28 10:13:37
举报
文章被收录于专栏:京程一灯京程一灯

开门见山:一个chrome插件会包含哪些文件及文件夹

代码语言:javascript
复制

简单说明一下:

  • html:存放html页面
  • images:存放插件图标
  • scripts:存放js文件
  • styles: 存放样式
  • _locales: 存放多语言文件
  • manifest.json:一些关于插件的元数据,作为chrome入口文件

看目录结构,像不像一个网站?Bingo! Chrome插件就是一个网站类的应用,它是用html、javascript、css组成的一个webapp; 相比于通常的webapp, Chrome插件还可以调用更多浏览器层面的api,包括书签、历史记录、网络请求拦截、截获用户输入等等。(PS:插件不要随便乱装哦,很危险滴!)

重点说一说这个文件:manifest.json

如前所述,它包含了一些插件的元数据,作为chrome的入口文件,可以理解为插件的程序清单,那么它到底做了什么事情呢? 结合示例,我们细细来看:

代码语言:javascript
复制
{
  // 清单版本号,建议使用 版本 2,版本 1 是旧的,已弃用,不建议使用
  "manifest_version": 2, 
  "name": "chome-plugin", // 插件名称
  "version": "1.8.6",  // 插件版本
  // 这里写些废话,举个栗子,‘应产品要求,杀个程序祭天’
  "description": "This is an extension for your chrome", 
  "icons": {
    "16": "images/custom/16x16.png",
    "48": "images/custom/48x48.png",
    "128": "images/custom/128x128.png"
  },
  //browser_action和page_action只能添加一个
  "browser_action": { //浏览器级别行为,所有页面均生效
    "default_icon": "images/custom/16x16.png",//图标的图片
    "default_title": "Hello ELSE", //鼠标移到图标显示的文字 
    "default_popup": "html/popup.html" //单击图标后弹窗页面
  }, 
  "page_action":{ //页面级别的行为,只在特定页面下生效 
    "default_icon":{
        "24":"images/custom/24x24.png",
        "38":"images/custom/38x38.png"
        },
    "default_popup": "html/popup.html",
    "default_title":"Hello ELSE"
  },

  // 可选
  "author": "ELSE TEAM",
  "automation": "...",   

  "background": {
    "scripts": [
      "scripts/background.js",
      "scripts/devtools-page.js"
    ]
  },
  "devtools_page": "html/devtools-page.html",

  // 定义对页面内容进行操作的脚本
  "content_scripts": [
    {
      "js":["js/else-insert.js"],
      "css": ["css/else-insert.css"],
      "matches":["<all_urls>"] // 只在这些站点下 content_scripts会运行
    }
  ],
  // 数组,声明插件所需要的权限,这里就是很危险的存在了,想干坏事的你是不是很激动!
  "permissions": [
    "cookies",
    "http://*/*",
    "management",
    "tabs",
    "contextMenus"
  ]}

开发示例

代码来了:https://github.com/StevenX911/share/tree/master/source-read/chrome-plugin/no-socializing

加载并运行插件

  • 在您的浏览器中访问 chrome://extensions(或者单击多功能框最右边的按钮:打开 Chrome 浏览器菜单,并选择工具(L)菜单下的扩展程序(E),进入相同的页面)。
  • 确保右上角开发者模式复选框已选中。 Ensure that the Developer mode checkbox in the top right-hand corner is checked.
  • 单击加载正在开发的扩展程序…,弹出文件选择对话框。
  • 浏览至您的扩展程序文件所在的目录,并选定。

您也可以将扩展程序文件所在的目录拖放到浏览器中的 chrome://extensions 上加载它。

如果扩展程序有效的话,它将被加载并且立刻处于活动状态!如果无效的话,页面顶部将显示错误消息,请纠正错误再重试。

打包发布

开发插件的目的是为了贡献自己的一点技术力量,为人类的永恒与和平略尽绵力,当然这都是胡扯!大部分的开发者都想赚些个零花,不过首先你得向google上交五美金!

注册开发者账户自不必说,墙都翻不出去的程序员当不了好厨子。

点击链接https://chrome.google.com/webstore/developer/dashboard/进入google开发者控制台,你会看到下图,提示交5美元注册开发者。

在输入信用卡信息环节,注意选中国香港,然后再地址中加上“转大陆”字样就可以。

注册开发者身份成功后,将webpp文件打包提交

发布成功后效果如下图


本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2017-08-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 京程一灯 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 开门见山:一个chrome插件会包含哪些文件及文件夹
  • 重点说一说这个文件:manifest.json
  • 开发示例
  • 加载并运行插件
  • 打包发布
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档