惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

J
Java Code Geeks
G
Google Developers Blog
Blog — PlanetScale
Blog — PlanetScale
U
Unit 42
A
About on SuperTechFans
Vercel News
Vercel News
B
Blog
Martin Fowler
Martin Fowler
MyScale Blog
MyScale Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
腾讯CDC
D
Docker
V
Visual Studio Blog
博客园 - 叶小钗
The Cloudflare Blog
Jina AI
Jina AI
B
Blog RSS Feed
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
WordPress大学
WordPress大学
T
Tailwind CSS Blog
MongoDB | Blog
MongoDB | Blog
D
DataBreaches.Net
月光博客
月光博客
大猫的无限游戏
大猫的无限游戏

陈少文的网站

巨变与机遇的未来十年 Kubernetes 平台管理软件压力测试方案 使用镜像部署 Hexo 静态页面 终于等到你 - GitHub 镜像仓库服务(ghcr.io) 一起来学 Go --(6)Interface 一起来学 Go --(5)Goroutine 和 Channel 什么是函数式编程 如何在 Kubernetes 集群集成 Kata 柯里化与偏函数 使用 PyGithub 自动创建 Label 软件产品是团队能力的输出 Helm 2 、Helm 3 比较 IoT 变现 Kubernetes 中的 DNS 服务 国内的 Helm 镜像源 Harbor 使用自签证书支持 Https 访问 DevOps 工具链之 Prow 如何使用 kfctl 安装 Kubeflow VS Code 无法下载 Go 插件的工具包 工程师更应具有服务精神 你不知道的 Docker 使用技巧 使用 Docker 运行 Tensorflow 论中国 什么是左移 如何清空 Git 仓库全部历史记录 一禅小和尚 有风吹过厨房 时间的玫瑰 如何在 CentOS 安装 GPU 驱动 开发 Tips(19)
Chrome 扩展开发
微信公众号 · 2016-12-04 · via 陈少文的网站

1. Chrome增强功能的方式:扩展、插件、应用

Google Chrome(谷歌浏览器)发展至今,已经不仅仅是一个浏览器,更像一个平台,可以个性化的安装自己需要的服务,同时也可以通过它来发布自己提供的服务。目前主要有三种方式来扩展浏览器的功能:

2. 扩展(Extension)

在地址栏输入:chrome://extensions/,看到自己安装的扩展。扩展主要用于增强浏览器的功能,仅依赖于浏览器,可以跨系统运行。当出现安全风险时,浏览器会受到攻击。扩展可以改变页面的内容,代理服务器等设置。通常在地址栏和工具栏显示图标。

3. 插件(Plugin)

在地址栏输入:chrome://plugins/,看到自己安装的插件。插件一般是安装程序时,附带安装的,用于浏览器集成软件提供的API服务。常见的插件有,Flash插件、PDF插件、Java插件等,不同操作系统,插件可能不同。当出现安全风险时,系统会受到攻击。

4. 应用(Application)

在地址栏输入:chrome://apps,看到自己安装的应用。相比较与扩展和插件,应用并不依赖于浏览器运行,在Windows OS中菜单栏甚至能找到Chrome应用-的目录。应用更强调独立运行,运行时有自己独立的运行窗口,同时能调用底层的系统接口,比如USB、文件的读写等。

5. 让我们来开发一个小应用

这里不涉及插件的开发,扩展和应用的开发差不多,下面就不做太多区分。还有一类是theme,主要用于美化Chrome。

5.1 基本工具

  • Google Chrome - 谷歌浏览器
  • Chrome Dev Editor - 一个IDE,不用也可以,Chrome Web Store直接安装

5.2 扩展由哪些构成

每个扩展都包含以下文件:

  • 一个mainfest.json文件(必须,且同名);
    mainfest.json文件是Chrome运行扩展的入口,配置扩展名称、版本、 描述、图片位置等信息。必须包含name、version、mainfest_version(设置为2)属性,browser_action、pagea_ction、app、theme字段只能选择一个。
      app: 说明是Chrome App类型,弹出一个独立页面运行
      browser_action:说明是Browser Action类型,增强浏览器的**通用功能**,与网站无关
      page_action:说明是Page Action类型,根据访问的网址进行操作的,可以选择
      theme:说明是主题类型,开发Chrome皮肤
      permissions:对需要访问的网站进行授权
      background:后台,可以与前端页面发生交互通信,发送跨域请求
      content_scripts: 注入页面的脚本,可以修改页面的DOM,当然这里也可以与后台backgroup通信获取数据,需要用到chrome.*的API接口
  • 若干html文件文件;
    弹出的页面
  • 若干js\css文件;
    扩展或应用中使用的js\css文件,可以没有,但是出于安全考虑,不允许在html中运行js代码
  • 若干图片及其他文件;
    扩展或应用中使用的图片文件,甚至还会有so,dll文件等,虽然现在这种注入功能的形式不被提倡。

5.3 现在就开始写个应用

实现的功能就是页面跳转,点击图标之后跳转到指定的页面。
文件组织如下:

blueking目录下有icon_128.png、mainfest.json两个文件。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
touch mainfest.json

{
  "app": {
      "launch": {
         "web_url": "http://o.qcloud.com/console/"
      },
      "urls": [ "http://o.qcloud.com/console/" ]
   },
   "description": "BlueKing",
   "icons": {
      "128": "icon_128.png"
   },
   "manifest_version": 2,
   "name": "BlueKing",
   "permissions": [ "unlimitedStorage", "notifications" ],
   "short_name": "BlueKing",
   "update_url": "https://clients2.google.com/service/update2/crx",
   "version": "1.0.0"
}

还需要准备一个icon_128.png文件作为app的图标显示。
在Chrome Dev Editor中直接运行或者利用浏览器打包安装,会在应用中找到

开发时,将上述文件放在一个文件夹,最好全部文件utf-8编码;测试时,进入扩展程序页面,勾选开发者模式,单击打包扩展程序,选择开发目录即可打包生成相应的crx包;发布时,不仅仅需要可以运行的一套项目代码,还需要若干图标,全部打包压缩成zip文件,开通开发者账户之后上传到开发者中心即可。

如果使用Chrome Dev Editor开发,那么点击左下侧的**+,创建一个JavaScript Chrome App**项目,即可看到一个完整的扩展程序框架。需要做的就是填充自己的页面效果和逻辑。和普通的web应用开发无异。

6. 参考资料

7. 补充

【自2016年11月21日起,所有新打包或托管的应用仅限于Chrome操作系统,用户无法在Windows,Mac或Linux上使用。现有应用将继续在所有主要平台上提供,并将继续接收更新。免费的扩展程序,主题和应用程序现在可以发布到古巴地区。如果您有一个项目当前发布到“所有地区”,它已被自动选择加入古巴。您可以随时在编辑页面的“地区”部分更新项目的发布偏好设置。】大概有两年时间给开发者迁移现有的应用,扩展不受影响。