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

推荐订阅源

L
LINUX DO - 最新话题
C
Cyber Attacks, Cyber Crime and Cyber Security
G
GRAHAM CLULEY
T
Tenable Blog
T
Threatpost
C
CXSECURITY Database RSS Feed - CXSecurity.com
I
Intezer
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
D
Darknet – Hacking Tools, Hacker News & Cyber Security
K
Kaspersky official blog
Security Latest
Security Latest
P
Privacy & Cybersecurity Law Blog
Google Online Security Blog
Google Online Security Blog
SecWiki News
SecWiki News
P
Palo Alto Networks Blog
TaoSecurity Blog
TaoSecurity Blog
Webroot Blog
Webroot Blog
Spread Privacy
Spread Privacy
O
OpenAI News
The Last Watchdog
The Last Watchdog
P
Proofpoint News Feed
C
Check Point Blog
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
人人都是产品经理
人人都是产品经理
S
Security @ Cisco Blogs
Scott Helme
Scott Helme
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
月光博客
月光博客
S
Securelist
酷 壳 – CoolShell
酷 壳 – CoolShell
V
V2EX
T
Troy Hunt's Blog
W
WeLiveSecurity
GbyAI
GbyAI
N
News | PayPal Newsroom
Y
Y Combinator Blog
C
Cisco Blogs
H
Help Net Security
The GitHub Blog
The GitHub Blog
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
博客园 - 【当耐特】
Jina AI
Jina AI
MongoDB | Blog
MongoDB | Blog
P
Proofpoint News Feed
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
云风的 BLOG
云风的 BLOG
小众软件
小众软件
N
News and Events Feed by Topic

陈少文的网站

巨变与机遇的未来十年 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) 使用 Velero 备份 Kubernetes 集群 Kubernetes Cheat Sheet 开发 Tips(18) 如何构建一个 Java 工程 开发 Tips(17) KubeSpray 安装 Kubernetes 报错 ip in ansible_all_ipv4_addresses 基于 Kubernetes 和 Jenkins 搭建自动化测试系统 在 Kubernetes 上动态创建 Jenkins Slave 使用 Jenkins 进行服务拨测 开发 Tips(16) Kubernetes 签发 Ingress 证书及日常故障运维 Kubernetes 中 Deployment 的基本操作 Kubernetes 中的证书 如何使用 KubeBuilder 开发一个 Operator Kubernetes 1.6.0 安装问题汇总 镜像管理工具 -- Harbor 开发 Tips(15) Docker 如何拉取镜像 开发 Tips(14) 使用 Helm 安装 harbor 开发 Tips(13) 使用 S2I 构建云原生应用 在 Kubernetes 中使用 emptyDir、hostPath、localVolume 开发 Tips(12) 开发 Tips(11) 代码质量分析工具 SonarQube 使用 Kubeadm 安装 Kubernetes 集群 一起来学 Go --(4)常用函数 Kubernetes 中的 Ceph Kubernetes 之 Volumes Kubernetes 之 Labels、Selectors 开发 Tips(10) 开源正在重构商业模式 Kubernetes 之网络 Kubernetes 之 API 使用 Helm 和 Operator 快速部署 Prometheus Kubernetes 复杂有状态应用管理框架 -- Operator Kubernetes 的包管理器 -- Helm 一起来学 Go --(3)Go Modules 如何一步一步地优化博客方案 kubectl 实用指南 Kubernetes 中的基本概念 搭建远程 Kubernetes 开发环境 大公司和小公司的 ToB 思路 开发 Tips(9) Go 入门指南 一起来学 Go --(2)数据与逻辑结构 如何预防 Web 富文本中的 XSS 攻击 django-xss-cleaner 云工作时代 一起来学 Go --(1)背景与特点 SaaS 开发团队的不同阶段 你不知道的 Git 使用技巧 输出既服务 微服务设计 继续奔跑 开发 Tips(8) 从账户安全到二次验证 Django 性能之数据库查询优化 Django 性能之分库分表 敏捷开发之研发流程 打造一致性的团队 开发 Tips(7) Pytest 进阶学习之 Mock PaaS 部署之 buildpack Go 开发配置 领域输出才是 PaaS 的核心竞争力 Pytest 入门学习 开发 Tips(6) 如何使用 Jenkins、Docker、GitLab 搭建 Django 自动化部署流程
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上使用。现有应用将继续在所有主要平台上提供,并将继续接收更新。免费的扩展程序,主题和应用程序现在可以发布到古巴地区。如果您有一个项目当前发布到“所有地区”,它已被自动选择加入古巴。您可以随时在编辑页面的“地区”部分更新项目的发布偏好设置。】大概有两年时间给开发者迁移现有的应用,扩展不受影响。