手把手教你开发chrome扩展
Google Chrome扩展开发指南
Google Chrome插件开发Google Chrome扩展是一种软件，以增强Chrome浏览器的功能。
Google Chrome扩展使用HTML、JavaScript、CSS和图片等Web技术开发。
Google Chrome扩展至少包括一个manifest.json和一个js文件manifest.json是插件调度的大本营，声明各种资源的名字js文件中定义要执行的操作可以通过如下的方式直接访问Google Chrome扩展中的文件：chrome-extension://<extensionID>/<pathToFile>extensionID，可以通过chrome://extensions的URL查看。
在开发过程中extensionID经常变化，可以使用@@extension_id替代；一旦打包部署就成为永久extensionID。
Google Chrome扩展往往包含一个不可见的background page，Google Chrome扩展的主要业务逻辑都位于此。
有两种类型的background page，一种是persistent background pages，另一种是event pages。
Persistent background pages总是可见，而Event pages事件驱动是否可见。
Event pages根据需要加载。
在manifest.json文中注册Event page如下：{"background": {"scripts": [myEventPage.js],"persistent": false]}Google Chrome扩展的可视UI（二选一）browser actions，Google Chrome扩展适用于任何页面。
图标往往位于浏览器地址栏外右侧。
page actions，Google Chrome扩展只作用于某一页面，当打开该页面时出现Google Chrome扩展，关闭该页面则Google Chrome扩展也随之消失。
浏览器扩展程序开发入门
chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest) chrome.i18n chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage) chrome.storage
4.2. content-scripts
所谓 content-scripts， 其实就是 Chrome 插件中向页面注入脚本的一种形式 （虽然名为 script， 其实还可以包括 css 的），借助 content-scripts 我们可以实现通过配置的方式轻松向指定页 面注入 JS 和 CSS（如果需要动态注入，可以参考下文），最常见的比如：广告屏蔽、页面 CSS 定制，等等。 示例配置： { // 需要直接注入页面的 JS "content_scripts": [ { //"matches": ["http://*/*", "https://*/*"], // "<all_urls>" 表示匹配所有地址 "matches": ["<all_urls>"], // 多个 JS 按顺序注入 "js": ["js/jquery-1.8.3.js", "js/content-script.js"], // JS 的注入可以随便一点，但是 CSS 的注意就要千万小心了，因为一不小心就 可能影响全局样式 "css": ["css/custom.css"], // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认 document_idle
谷歌浏览器添加多功能扩展程序
谷歌浏览器添加多功能扩展程序
使用谷歌浏览器我们会发现，如果没设主页的话，打开浏览器的界面是光秃秃的。
想让界面丰富起来，其实我们可以尝试添加一些应用程序在里面的，跟着小编一起来折腾吧~
打开谷歌浏览器:
点击右上方的“菜单”按钮，在弹出的菜单栏中点击“设置”
进入到设置界面后，我们切换至“扩展程序”这里可以看到我们并没有任何扩展程序，点击“浏览该程序库”去在线添加更多有趣多个功能的扩展程序吧：
【PS：前提是需要我们登陆自己的账号哈】
进入到程序商店，十分丰富多样的应用程序展现在我们眼前，当然我们要注意的是，有很多在中国是用不了的，比如facebook,twitter等...（除非...你懂的）
那么我们就着手搜寻一些在中国可以用到的应用程序吧。
我们以“时钟”为例，把鼠标放在上面便会弹出“添加至CHROME”的按钮，点击后会提示询问“要添加时钟吗”点击添加：
添加成功后我们再来看看原先的浏览器界面，就多出来一个扩展程序应用了。
就是这么简单~！
赶快来添加更多有意思的扩展程序吧~。
Chrome浏览器扩展开发系列之二：Chrome浏览器扩展的调试
Chrome浏览器扩展开发系列之⼆：Chrome浏览器扩展的调试1. 查看扩展程序的详细信息和ID通过Chrome 浏览器的“ ⼯具->更多⼯具->扩展程序”，打开chrome://extensions页⾯，选中右上⾓的“开发者模式”，可以查看扩展程序的详细信息（如名称、概述、占⽤空间⼤⼩、版本和权限等）和ID。
2. 查看扩展程序的popup页⾯通过Chrome 浏览器的“⼯具 ->更多⼯具->扩展程序”，打开chrome://extensions页⾯，选中右上⾓的“开发者模式”（必须在开发者模式下才能够看到调试菜单项），这时右键单击地址栏右侧的扩展程序图标，选择“审查弹出内容Inspect popup”，将会打开Developer Tools窗⼝，其中可以查看或跟踪popup.html页⾯的所有相关资源，包括js、DOM和CSS，如下图所⽰。
同时显⽰出popup.html页⾯。
在Developer Tools窗⼝中，调试常⽤的有Elements、Sources和Console⾯板。
通过Elements⾯板，可以对照显⽰的页⾯查看页⾯的组成元素。
通过Sources⾯板，可以打开所有涉及的js⽂件，并设置断点，还可以Watch相关的js表达式。
跟踪调试过程中，F11键可以单步调试，Shift+F11键可以跳过当前运⾏的函数，F8键可以恢复运⾏。
通过Console⾯板，可以查看JavaScript代码（如console.log(), console.error()等）运⾏的输出结果，类似于Windows命令⾏窗⼝。
注意：在此⾯板中输⼊location.reload(true)，可以重新加载popup页⾯，从⽽对popup页⾯的初始化过程进⾏跟踪。
3. 查看扩展程序的options页⾯扩展程序的options页⾯的过程与popup页⾯类似，区别仅在于打开Developer Tools窗⼝的⽅式。
谷歌浏览器扩展插件如何设置使用？谷歌浏览器扩展程序设置详细教程
⾕歌浏览器扩展插件如何设置使⽤？⾕歌浏览器扩展程序
设置详细教程
⾕歌浏览器最⼤的乐趣和最⼤的功能便是其丰富多彩的第三⽅，通过第三⽅开发者提供的免费插件，你能轻松划词翻译、设置VPN私有⽹络、享受阅读时光和阻⽌令⼈讨厌的视频⽹站前贴⽚⼴告，我们都知道我们可以通过⾕歌插件市场寻找或者⽹络上⽹友友情提供各种扩展程序。
但很多⼩百朋友插件安装好后不知如何设置？这⾥⼩编教教⼤家插件设置的⼀般⽅法，希望能对你有帮助
1、进⼊ “扩展程序”设置，选择【设置】-【⼯具】-【扩展程序】
或者你直接在地址栏中直接输⼊“chrome://extensions ”
2、“扩展程序”的启⽤与删除，如下图所⽰
3、在扩展程序使⽤界⾯，我们点击选项，可以对扩展程序进⾏设置
4、我们也可以通过快捷⽅式对安装的插件进⾏设置，点击地址栏左侧的【》】图标即可
或者直接把⿏标放在插件上，点击右键进⾏设置
⾕歌浏览器插件设置⽅法⽐较简单，对于⼀些功能⽐较丰富的第三⽅浏览器扩展程序来说，其功能丰富性不亚于⼀款常见的⼿机APP，在使⽤时我们根据⾃⾝使⽤习惯和特点合理设置即可。
有疑问的话欢迎在下⽅留⾔。
开发自己的Chrome浏览器扩展程序
开发自己的Chrome浏览器扩展程序随着互联网的快速发展，我们每天都离不开浏览器，而谷歌的Chrome浏览器成为了很多人的首选。
然而，我们并不满足于只是使用一个浏览器，而是希望建立一个个性化的、更高效的浏览器环境。
在这方面，开发自己的Chrome浏览器扩展程序是一个非常好的选择。
一、认识Chrome浏览器扩展程序1. Chrome浏览器扩展程序是什么？- Chrome浏览器扩展程序是一种能够为Chrome浏览器添加额外功能的插件。
它们能够修改浏览器的界面、增加新的功能或者改善现有的功能。
2. 为什么要开发自己的扩展程序？- 自己开发扩展程序可以满足个性化需求，将浏览器调整为更符合自己使用习惯的工具。
- 可以提高工作效率，为特定任务定制扩展程序，使得工作更加高效。
- 可以学习编程和开发技能，提高自己的能力。
二、开发Chrome浏览器扩展程序的基本步骤1. 编写扩展程序的基本结构- 创建一个文件夹来存放扩展程序的相关文件。
- 在文件夹中创建一个名为manifest.json的文件，这是一个必要的文件，用于描述扩展程序的相关信息。
2. 了解manifest.json文件的结构- manifest.json文件包含了扩展程序的基本信息、权限和功能等。
- 必要的字段包括"name"（扩展程序的名称）、"version"（版本号）、"manifest_version"（manifest文件的版本号）等。
- 还可以包括"permissions"（扩展程序需要的权限）、"background"（后台脚本，用于处理扩展程序的逻辑）、"browser_action"（浏览器工具栏图标及点击行为）等字段。
3. 添加扩展程序的功能- 可以使用HTML、CSS和JavaScript等技术来为扩展程序添加功能。
chrome插件开发教程
chrome插件开发教程Chrome插件是一种可以在谷歌浏览器上添加功能和定制化用户体验的工具。
通过开发自己的Chrome插件，你可以为自己的需求定制独特的功能，提高工作效率，或者为其他人提供便利。
在本教程中，我们将讨论如何开发一个简单的Chrome插件。
首先，你需要确定你的插件将要实现的功能。
从Chrome浏览器的应用商店中搜索类似的插件，了解市场上已有的功能和用户反馈，以便为你的插件设定目标。
接下来，创建一个新的文件夹，作为你的插件项目的根目录。
在根目录下创建一个名为`manifest.json`的文件，这是Chrome插件的核心文件。
在`manifest.json`中，你需要定义插件的名称、版本、描述和图标等基本信息。
在`manifest.json`文件中，你还需要定义插件的权限。
这些权限将决定你的插件可以访问的Chrome浏览器的功能和信息。
例如，如果你的插件需要访问用户的浏览历史记录，你需要在`permissions`字段中添加`"history"`。
完成`manifest.json`文件后，你可以开始编写插件的核心逻辑。
这可以是一个简单的JavaScript文件，或者是一个由多个文件组成的复杂应用程序。
你可以使用HTML、CSS和JavaScript来构建插件的界面和功能。
为了测试和调试插件，你可以在Chrome浏览器的扩展程序界面打开`开发者模式`并加载你的插件。
然后，你可以通过修改代码和刷新页面来实时调试你的插件。
当你完成了插件的开发和测试后，你可以将你的插件打包为一个`.crx`文件，并提交到Chrome应用商店进行发布。
在提交插件之前，请确保你已经了解和遵守Chrome应用商店的发布规范和政策。
总结一下，开发Chrome插件可以为用户定制化浏览器功能，提高工作效率，或者为其他人提供便利。
通过编写`manifest.json`文件定义插件的基本信息和权限，以及编写JavaScript来实现插件的功能，你可以开发出自己的Chrome插件。
在Chrome浏览器中管理插件和扩展程序
在Chrome浏览器中管理插件和扩展程序第一章：插件和扩展程序的作用及安装方式Chrome浏览器作为全球最受欢迎的浏览器之一，其强大的扩展程序和插件功能为用户提供了更多的个性化体验和功能拓展。
插件和扩展程序可以增加浏览器的功能，包括增强网页浏览、提高工作效率、改善隐私和安全等。
在Chrome浏览器中，可以通过多种方式来安装插件和扩展程序。
插件和扩展程序可以通过Chrome网上应用商店来安装。
只需在Chrome浏览器中输入 "chrome://extensions/"，进入扩展页面，点击左上角的 "打开Chrome Web Store"，即可进入应用商店。
在应用商店中，用户可根据需求搜索插件和扩展程序，并点击 "添加至Chrome" 安装使用。
第二章：插件和扩展程序管理的基本方法Chrome浏览器提供了简单方便的管理方式，使用户可以灵活控制插件和扩展程序的安装和卸载。
在 "chrome://extensions/" 页面，用户可以看到已安装的插件和扩展程序的列表，并可以对其进行相关操作。
对于已安装的插件和扩展程序，用户可以通过开关按钮来启用或禁用它们。
在该页面中，用户还可以对插件和扩展程序进行更新和删除操作。
为了更好地管理已安装的插件和扩展程序，用户还可以使用分组功能，将其按类别进行整理。
第三章：常用的插件和扩展程序推荐Chrome浏览器拥有众多的插件和扩展程序，涵盖了各个领域的需求。
以下介绍几款常用的插件和扩展程序，以供参考。
1. AdBlock Plus：广告拦截器，可自动屏蔽网页中的广告，提供更清爽的浏览体验。
2. Grammarly：拼写和语法检查工具，在写作过程中帮助用户纠正拼写和语法错误。
3. LastPass：密码管理工具，可以存储和管理用户的各类密码，提供方便的自动登录功能。
4. Pocket：稍后阅读工具，可以将感兴趣的文章保存到个人阅读列表，随时阅读。
Chrome扩展开发指南（第一版）
Chrome扩展开发指南（第一版）接着写第二篇，主要是为了防老年痴呆....手欠，忘掉备份链接这类灵异的事情发生=======================================我觉得不错的学习路径：【基础部分】JS/CSS，JQUERY，这三个先学，JS则是那本【JAVASCRIPT高级编程第三版】比较不错，然后可以学COFFESCRIPT，来写面向对象的程序。
不过我一直不太会写OO的东西，所以，总是用组件化的方式绕过去的。
然后可以试试用所谓的测试驱动来进行迭代开发吧，我因为开发的都是小插件，所以，就懒得写测试了。
然后就是HTML5的所有API，File API/剪贴板的API/Audio API/Storage API/DOM的新变化等等。
有兴趣的还可以看看WebGL，CSS3川死佛母什么的。
【API部分】接下来看官方的教程就可以了，主要的开发模型其实很简单就是background.html，与content.js或者是popup.html或者是options.html这几个页面之间的通讯。
结合上一篇的插件开发总结（/note/220782135/），建立的路线可以是，写好ActivX插件一份。
写好NPAPI插件一份（最好还是用FireBreath来写，当然，前提是不在于footprint的大小）。
然后结合着扩展来进行开发，这是后话。
当然还可以把重度的API交给PEPPER API来搞定，但是注意PEPPER API当下也有许多问题。
【Web Worker】CHROME的Web Worker能力比其他的强那么一些，简单的说，它可以传指针给WORKER，主线程和WORKER线程之间可以共享内存，说白了就是。
NODE.JS的V8其实也继承了这个能力【调试】尽可能得用console.log就可以了，这是要注意几个小问题1、background.html和popup.html里写的log你是直接看不到的，它们相当于是另一个网页，所以需要使用通讯方式将信息发到某个页面然后LOG，你才能比较好的看到。
使用Vue开发自己的Chrome扩展程序过程详解
使⽤Vue开发⾃⼰的Chrome扩展程序过程详解前⾔浏览器扩展程序是可以修改和增强 Web 浏览器功能的⼩程序。
它们可⽤于各种任务，例如阻⽌⼴告，管理密码，组织标签，改变⽹页的外观和⾏为等等。
好消息是浏览器扩展并不难写。
可以⽤你已经熟悉的 Web 技术（HTML、CSS 和 JavaScript）创建 —— 就像普通⽹页⼀样。
但是与⽹页不同的是，扩展程序可以访问许多特定于浏览器的 API，这才是有趣的地⽅。
在本教程中，我将向你展⽰如何为 Chrome 构建⼀个能够改变新标签页⾏为的简单扩展。
这个扩展程序的 JavaScript 部分，我将使⽤ Vue.js 框架，因为它将允许我们快速启动并运⾏，⽽且⽤ vue ⼯作是很有趣的。
Chrome 扩展程序的基础知识Chrome扩展程序的核⼼部分是和。
manifest ⽂件采⽤JSON格式，提供有关扩展的重要信息，例如其版本、资源或所需的权限。
后台脚本允许扩展对特定的浏览器事件做出反应，例如创建新选项卡。
为了演⽰这些概念，让我们先写⼀个“Hello，World！” Chrome 扩展。
创建⼀个名为 hello-world-chrome 的新⽂件夹和两个⽂件：manifest.json 和 background.js：mkdir hello-world-chromecd hello-world-chrometouch manifest.json background.js打开 manifest.json 并添加以下代码：{"name": "Hello World Extension","version": "0.0.1","manifest_version": 2,"background": {"scripts": ["background.js"],"persistent": false}}name、version 和 manifest_version 都是必填字段。
浏览器扩展开发技巧
浏览器扩展开发技巧在互联网时代，浏览器已经成为人们日常生活中必不可少的一部分。
各种强大的浏览器插件和扩展程序大大拓展了浏览器的功能，同时也提高了用户的使用体验。
随着越来越多的用户开始关注浏览器插件和扩展，开发浏览器插件和扩展的技术也日益重要。
本文将介绍一些浏览器插件和扩展的开发技巧。
1. 选择适合自己的主流浏览器首先，我们需要选择一个适合自己的主流浏览器。
例如，Chrome、Firefox、Safari和Edge等浏览器提供了非常全面的插件和扩展支持，因此它们都是非常值得考虑的平台。
不过，在选择浏览器之前，我们需要了解浏览器的市场规模、用户数量和支持插件的能力等，从而更好地了解自己的目标受众。
2. 学习使用浏览器插件和扩展开发环境在选择好浏览器之后，我们需要学习使用浏览器插件和扩展开发环境。
不同浏览器的开发环境使用不同的技术和语言，例如，Chrome的插件和扩展开发使用JavaScript、HTML和CSS 等技术，而 Firefox 则采用 WebExtensions 应用程序编程接口（API）。
因此，我们需要了解每个浏览器的 API 和开发环境，并掌握相关技术和语言。
3. 设定你的浏览器插件或扩展的目标在设计浏览器插件或扩展之前，我们需要设定自己的目标。
这意味着我们需要考虑如何提高用户体验，增强浏览器的功能和功能，或解决某些烦人的问题。
这样，我们就可以在实现浏览器插件或扩展时遵循这些目标，从而达到有效的结果。
4. 设计一个好的用户界面设计好的用户界面同样至关重要。
由于浏览器插件和扩展是为用户使用而设计的，因此我们需要设计一个清晰易用的用户界面，使用户能够轻松地使用浏览器插件或扩展的所有功能。
为了帮助您获得更好的用户体验，您可以在不同的浏览器上查看其他用户的相关扩展程序，并了解其中的设计和功能，从而指导自己的设计。
5. 小心处理敏感数据和隐私在开发浏览器插件或扩展时，我们需要注意保护敏感数据和隐私，以免不良方面获得访问。
Chrome插件开发，入门Demo
Chrome插件开发，⼊门Demo1、Chrome扩展⽂件Chrome扩展⽂件以.crx为后缀名，在Google Chrome扩展官⽅⽹站下载扩展时，Chrome会将.crx⽂件下载到Chrome的Application Data⽂件夹的User Data\Temp下，⼀般是C:\Documents and Settings\User\Local Settings\Application Data\Google\Chrome\UserData\Temp，安装完成或者取消安装，该⽂件就会被删除。
.crx实际上是⼀个压缩⽂件，使⽤解压⽂件打开这个⽂件就可以看到其中的⽂件⽬录，下图中是“关灯看视频”扩展的截图：因此可以认为，我们实际上就是写⼀个Web应⽤，然后将按照Chrome的规定将⼀个快捷⽅式放在Chrome⼯具栏上。
2、Chrome例⼦准备⼀个icon图⽚，⽤来显⽰在浏览器右上⾓的图标，如：创建 manifest.json 插件描述⽂件：1. {2. "name": "收益率计算",3. "version": "0.0.1",4. "manifest_version": 2,5. // 简单描述6. "description": "累加优惠券后计算最终实际收益率",7.8. "icons": {9. "16": "images/icon16.png"10. },11.12. // 浏览器⼩图表部分13. "browser_action": {14. "default_title": "收益率计算",15. "default_icon": "images/icon16.png",16. "default_popup": "html/calc.html"17. },18.19. // 引⼊脚本，content script 是运⾏在⼀个被称为isolated world 的运⾏环境⾥，20. // 和页⾯上的脚本互不⼲扰，因为不在⼀个运⾏环境⾥，所以也⽆法调⽤页⾯上脚本定义的⽅法了21. "content_scripts": [22. {23. "js": ["scripts/include.js"],24. // 满⾜什么条件下使⽤该脚本25. "matches": [26. //"http://*/*",27. //"https://*/*"28. "http://*/*",29. "https://*/*"30. ],31. // 什么情况下运⾏【指定⽂档何时加载脚本 document_start\document_end\document_idel】32. "run_at": "document_end"33. }34. ],35. // 应⽤协议页⾯36. "permissions": [37. "http://*/*",38. "https://*/*"39. ],40. "content_security_policy": "script-src 'self'; object-src 'self'"41. }创建弹出框HTML页⾯ calc.html：1. <!DOCTYPE html>2. <html>3. <head>4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />5. <title>收益率计算器</title>6.7. </head>8. <body>9. 本⾦：<input id="benjin" value="30000"/><br/>10. 收益率：<input id="lilv1" value="0.08"/><br/>11. 投资期限(天)：<input id="days" value="90"/><br/>12. 优惠券⾦额：<input id="coupon" value="450"/><br/>13. 最终收益率：<input id="lilv2" readonly="true" /><br/>14. <input id="calcBtn" type="button" value="计算" /><br/>15. <script src="../scripts/jquery-1.12.3.min.js"></script>16. <script src="../scripts/app.js"></script>17. </body>18. </html>创建引⼊的app.js⽂件：其中 jquery-1.12.3.min.js 为 jquery 库。
Chrome扩展开发指南
这个地址中，<extensionID>是你制作的扩展的唯一标示符，也就是扩展的身份证编号。 <pathToFile>是文件相对扩展顶级文件夹得位置。
manifest 文件 主文件取名 manifest.json，用来描述这个扩展，包括扩展名字、版本、调用的文件、可用域 等信息。下面是个典型的 manifest 文件，这个扩展可以调用 的内容。
给第一个插件增加新功能 你现在虽然做了第一个插件，但实际上他并没有实现任何功能，我们点击图标，没有任何反应 。
下面我们就给他增加点功能。 • 编辑 manifest.json 这个文件，用下面的代码替换现有的代码，其实我们只是加了一行代码 和一个逗号而已。 1{
1 "name": "第一个 Chrome 插件",
开始制作第一个插件 • 在计算机中创建一个目录来存放插件代码。 • 在目录里面创建文件 manifest.json(注意后缀名是.json)，用记事本打开，写入如下代码
1{
1 "name": "第一个 Chrome 插件",
1 "version": "1.0",
1 "description": "我的第一个 Chrome 插件，还不错吧",
1{
2 "name": "My extension",
3 ...
4 "browser_action": {
5
"default_icon": "images/icon19.png", // required
做个简单的chrome扩展
Cross-Origin XHR
– web pages - same origin policy – extension - remote servers outside of its origin – cross-origin permissions
Message Passing
– one-time requests
desktop notifications
– permissions/web_accessible_resources – webkitNotifications.createNotification – webkitNotifications.createHTMLNotification – show() – ondisplay/onclick
• 还有google搜关键词的。。
欢迎指正！谢谢！ hanyuxinting
推荐iOS App：遇见成语。
谢 谢！
发布！！更新！！
– hosting • application/x-chrome-extension • .crx && 符合下边两个条件：
– The file is not served with the TTP header X-Content-TypeOptions: nosniff
– The file is served with one of the following content types:
– *.png
• wav
– *.mp3/wav
• _locales
– zh_CN/en_US
manifest.json
– 核心文件 – 扩展名称、描述、icon、版本号、update_url – permissions – content_security_policy
如何制作一个Chrome扩展程序
浏览器扩展程序可以用来干什么？
• 当浏览器无法完成你想做的事，或者网站本身功能存在局限时。你不妨考虑自己做个扩展来帮助 你。
• 情景1：读英文网页的时候有的单词不认识，有的句子不会翻译，又不想打开翻译软件一个个查。 （某些浏览器并不自带翻译功能）
• 情景2：访问网站时总会弹出各种广告，关都关不掉。（浏览器没有屏蔽广告的功能） • 情景3：嫌某个网页的背景太丑了，我想自己给他设置一个背景。（该网站没有为用户提供背景 风格切换功能）
在看PPT之前 教你区分“插件”与“扩展程序”
• 插件对应的是“Plugin”，扩展对应的是“Extension”，所以它俩背后其实是两个完全不同的词。
• 插件并不会增加浏览器自身的功能，可调用操作系统的API，并且不同操作系统的插件一般不能 混用。我们经常遇到的插件有：Flash插件、PDF插件、Java插件等等。 • 相比较之下，扩展则可以增加浏览器本身的功能，也可以调用浏览器的API，并且同一个浏览器 的扩展一般也都是可以跨操作系统使用的。 • PS:其实多数人平时并没有区分这两个词，包括我自己
• 遇到以上问题，你不必忍气吞声，现有的一键翻译扩展程序，广告屏蔽插件（扩展程序）等均可 以解决。
用户如何使用扩展程序？
Default popup Context Menus
Options page
开始制作你自己的扩展程序！
• 试着去构思一个插件 • 选中网页中的文字，右键直接查看谷歌翻译(后面有相应的实例) • 你需要掌握的知识 • HTML, JavaScript, CSS • 你需要参考的文档 • 官方的是C面：Popup Page
THANKS
DESIGN BY:@Charry
},
background, default_popup, content_scripts消息 传递
使用ClojureScript进行chrome扩展开发
使⽤ClojureScript 进⾏chrome 扩展开发使⽤ClojureScript 进⾏chrome 扩展开发⽬录1 简介学习使⽤ClojureScript ，使⽤库，进⾏chrome 扩展开发。
chrome 只是包装了chrome 扩展的api,并把回调模型包装成事件模型，具体参考chromex 的指南。
基础的chrome 扩展开发知识参考，基本概念写的很清楚。
⼀个chrome 扩展主要由background 、popup 、content-script 三个独⽴的部分组成。
通过mainfest.json 对扩展进⾏配置。
扩展页⾯之间的通信参考。
ClojureScript 是编译⽬标为JavaScript 的clojure 实现。
主要学习下和JS 的互操作。
⽰例扩展的⽬的是实现的剧集更新监控，发现有新的剧集，则给出提醒，并提供下载地址,popup界⾯如下：图1 追剧提醒的popup 界⾯2 项⽬配置添加相应依赖项, ClojureScript 编译管理使⽤代替lein figwheel ，popup 界⾯使⽤reagent 实现,dom 操作使⽤dommy 库。
代码1 project.clj代码2 background 配置项: background.cljs.edn (defproject movmon "0.1.0-SNAPSHOT":dependencies [[org.clojure /clojure "1.10.1"][org.clojure /clojurescript "1.10.520"][org.clojure /core.async "0.4.500"][binaryage /chromex "0.8.4"][binaryage /devtools "0.9.10"][prismatic /dommy "1.1.0"][cljs-ajax "0.8.0"][binaryage /oops "0.7.0"][reagent "0.9.0-rc4"];;[com.bhauman/figwheel-main "0.2.3"];;[com.bhauman/rebel-readline-cljs "0.1.4"][environ "1.1.0"]]:plugins [[lein-cljsbuild "1.1.7":exclusions [[org.clojure /clojure ]]][lein-shell "0.5.0"][lein-environ "1.1.0"][lein-cooper "1.2.2"]]:source-paths ["src/background""src/popup""resources"]:clean-targets ^{:protect false } ["target""resources/unpacked/compiled""resources/release/compiled"]:profiles {:dev{:dependencies [[cider /piggieback "0.4.2"][com.bhauman /figwheel-main "0.2.3"][com.bhauman /rebel-readline-cljs "0.1.4"]]:repl-options {:nrepl-middleware [cider.piggieback /wrap-cljs-repl ]}}:release{:env {:chromex-elide-verbose-logging "true"}:cljsbuild {:builds{:background{:source-paths ["src/background"]:compiler {:output-to "resources/release/compiled/background.js":output-dir "resources/release/compiled/background":asset-path "compiled/background":main movmon.background:optimizations :advanced:elide-asserts true }}:popup{:source-paths ["src/popup"]:compiler {:output-to "resources/release/compiled/popup.js":output-dir "resources/release/compiled/popup":asset-path "compiled/popup":main movmon.popup:optimizations :advanced:elide-asserts true }}}}}}:aliases {"fig-main" ["trampoline" "run" "-m" "figwheel.main" "-bb" "popup" "-b" "background" "-r"]"release" ["with-profile" "+release" "do"["clean"]["cljsbuild" "once" "background" "popup"]]})代码3 popup 配置项: popup.cljs.edn由于不需要修改打开的⽹页，因此不需要content-script 。
分享ChromeExtension（扩展程序插件）开发的一些小经验
分享ChromeExtension（扩展程序插件）开发的一些小经验
1、不通过Chrome Web Store直接安装Chrome插件（Extension）
我们之前开发网摘Chrome插件时，不需要通过Chrome Web Store，直接在网站上提供网摘插件的链接，用户点击就可以安装。
后来，Chrome改为必须通过Web Store才能安装插件。
我们找到了一个Hack的方法，在Chrome Extensions窗口，直接将下载至本地的网摘插件文件拖动到Extensions窗口即可。
2、引用外部javascript文件的问题
如果在Extenstion中引用了外部的js文件，会引发这样的错误：
解决方法：在manifest.json中添加如下的代码（假设我们这里引用的是的js）：
3、不支持inline javascript代码的问题
从Chrome Extenstion V2开始，不允许执行任何inline javascript代码（也就是html内的任何js代码都不允许执行），比如下面的代码：
onclick中的addwz()函数不允许执行，点击时会报错：
解决方法：在内部引用的js文件中绑定事件，示例代码如下：。
「ChromiumEdge」浏览器使用「Chrome」扩展插件方法
「ChromiumEdge」浏览器使⽤「Chrome」扩展插件⽅法
昨天雷锋哥给⼤家介绍过了微软正式发布的「Chromium Edge」浏览器，不少⼩伙伴询问能否
使⽤「Chrome」扩展插件。
⽬前「Chromium Edge」扩展商店提供的扩展⽐较少，今天雷锋哥想找个⼿势扩展都没有，幸
好「Chrome」扩展插件可以移植到「Chromium Edge」正常使⽤，下⾯教⼤家⽅法。
▍把已安装的「Chrome」扩展移植
1.打开「Chromium Edge」的扩展页⾯（edge://extensions/），开启 “开发者模式” 和 “允许来⾃
其他商店的扩展程序”。
2.打开你「Chrome」安装⽬录⾥⾯的 Extensions 扩展⽂件夹
C:\Users\你的⽤户名\AppData\Local\Google\Chrome\User Data\Default\Extensions\
3.这时候你不知道哪个⽂件夹才是你需要的扩展插件，需要打开「Chrome」的扩展插件页⾯，
可以直接看到扩展插件的ID，然后找对应的⽂件夹，并复制出来。
4.打开「Chromium Edge」的扩展页⾯，点击“加载已解压的扩展程序”，选择复制出来的扩展⽂
件夹⼆级⽬录，然后载⼊就会安装上了。
▍直接从「Chrome」扩展页⾯下载安装（需梯⼦）
2.选择你要的扩展，直接安装上就⾏了。
PS：如果没有梯⼦的⽤户，也可以从第三⽅Chrome扩展插件⽹站下载，然后在「Chromium
Edge」的扩展页⾯，点击 “包扩展” 载⼊安装。
对咯，有些⽤户说官⽅下载地址打不开了，可以试试下⾯的地址：。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
手把手教你开发chrome扩展一：开发Chrome Extenstion其实很简单Chrome的更新速度可以说前无古人，现在我每天开机的第一件事就是打开Chrome检查是不是有了新版本。
界面清爽、操作人性化、网络备份资料和快速的启动速度令我爱不释手，还有它拥有众多的扩展程序，相对于firefox的插件来说，数量上和质量上稍显不足，但相信chrome将会很快在扩展上超越firefox，firefox上内存占用上实在不令人满意，也许我使用firefox的一个原因就是因为firebug，不过相信chrome平台的类firebug插件也会很快出现。
Chrome的扩展开发十分简单，我们只需要掌握web开发的htm+CSS+Javascript，就能很快开发出自己的扩展。
你需要了解的内容在开发前首先要掌握一些基础知识。
1、Chrome扩展文件Chrome扩展文件以.crx为后缀名，在Google Chrome扩展官方网站下载扩展时，Chrome会将.crx文件下载到Chrome的Application Data文件夹的User Data\Temp下，一般是C:\Documents and Settings\User\Local Settings\Application Data\Google\Chrome\User Data\Temp，安装完成或者取消安装，该文件就会被删除。
.crx实际上是一个压缩文件，使用解压文件打开这个文件就可以看到其中的文件目录，下图中是“关灯看视频”扩展的截图：因此可以认为，我们实际上就是写一个Web应用，然后将按照Chrome的规定将一个快捷方式放在Chrome工具栏上。
2、Browser Actions（扩展图标）把Browser Actions翻译成扩展图标不是很准确，但它的功能就是把你的应用显示在Chrome工具栏上。
我们在上面看到一个文件manifest.json，就是使用这个文件来把相应的图标和其他参数注册到Browser Actions。
比如下图中就是EverNote的扩展图标。
3、Page Actions（地址栏图标）如果你熟悉一些Chrome插件的话，你一定会发现有些扩展的图标不是显示在地址栏的右边，而是显示在地址内部右方，这就是Page Actions地址栏图标。
可以看出上面中有三个Page Actions，图中我标出的是Chrome添加书签，现在你就会发现其实这个也是Chrome的扩展，只不是它是直接内置在Chrome的。
Page Actions与Browser Actions的区别就是Page Actions不是随时都是显示的，必须在特定的页面中这个功能才能使用。
因此在开发中注意：如果不是全部页面中都能使用的功能请使用Page Actions方式。
4、popup弹出窗口popup属于Browser Actions，当点击图标时出现这个窗口，可以在里面放置任何html元素，它的宽度是自适应的。
当然，这个弹出窗口不会被Chrome拦截的:)如下图中是evernote的popup窗口：5、Background Pages后台页面这个窗口不会显示，它是扩展程序的后台服务，它会一直保持运行。
比如在一些需要数据保存程序中，如果当前用户关闭popup，就需要Background Pages来进行相应的操作。
自己动手做一个我们以一个简单的任务管理程序来一步步讲解。
上图是界面实现，我们首先完成界面的显示部分，首先建立一个新文件夹，以扩展应用的名称为标题，我们这里的应用叫做MyTaskList。
然后把找一个图标文件，放到文件夹中，也可直接右键下载我的这个图标：图标文件不要小于19px*19px，但最好也不要超过这个尺寸，虽然大图它会自适应，但会使得应用文件变大。
然后完成和未完成状态的两个图标放到资源文件中，可以建立任意文件夹放进去，因为CSS文件把定义它们的路径。
建立manifest.json来定义我们程序配置：{"name": "MyTaskList","version": "0.9.0","description": "Management my everyday's task lists.","browser_action": {"default_icon": "icon.png" ,"default_title": "My Task List","default_popup": "popup.html"}}其中name代表应用程序名，version代表版本号，description代表功能描述。
这些在安装扩展后就能看到，见下图：browser_action代表扩展图标段显示，它会定义图标地址、标题（也就是鼠标悬停提示）和默认的popup页面。
我们这里定义的popup页面为popup.html。
接下来开始定义popup.html显示，它不需要使用<html>、<head>和<body>标签，可以直接写上样式、脚本和html。
我们的popup.html源码为：<style type="text/css">*{margin:0;padding:0;}body{color:#333;overflow: hidden;margin: 0px;padding:5px;background: white;font-size:12px;}img{margin:0 4px;}#addItemDiv{color:#ccc;}.hide{display:none;}.show{display:block;}.taskItem{cursor:pointer;}input{width:100%;}label.on{width:12px; display:inline-block; height:12px; background:url(images/bg_task_on.gif) no-repeat 0px 2px;}label.off{width:12px; display:inline-block; height:12px; background:url(images/bg_task_off.gif) no-repeat 0px 2px;}</style><div id="newItem" class="gray">添加新项</div><div id="addDiv" class="hide"><input type="text" id="txtTitle" /></di v><div id="taskItemList"><div class="taskItem"><label class="on"></label><span class="taskTitle">新任务</span></div><div class="taskItem"><label class="off"></label><span class="taskTitle">已完成任务</span></div></div>打开预览，样子就已经出来了：这样我们文件就已经建立完成，文件列表如下：现在就可以先尝试把它打包装到自己的Chrome里。
首先打开Chrome-工具-扩展程序，展开开发人员模式，打到“打包扩展程序”按钮：点击“打包扩展程序…”，弹出打包选择文件窗口，在扩展程序根目标中找到我们建立的文件夹，私有密码文件第一次不用选择：点击确定，它会在根文件夹同一级生成MyTaskList.crx和MyTaskList.pem，MyTaskList.pem 是程序签名文件，以新版本的开发中还需要这个文件，不要删除它。
把MyTaskList.crx拖进Chrome 窗体内，就会把这个应用MyTaskList安装在Chrome里。
我们的这个简单的模型就能看到效果了，下一节我们就会完善其中的代码。
手把手教你开发Chrome扩展二：为html添加行为1.手把手教你开发chrome扩展一：开发Chrome Extenstion其实很简单2.手把手教你开发Chrome扩展二：为html添加行为3.手把手教你开发Chrome扩展三：关于本地存储数据上一节我们已经讲了Chrome扩展的基础知识，并构建了基础的html，这一节我们将就html DOM 添加部分添加脚本，即脚本在我们的popup页面中进行的操作，页面所产生的变化。
正常情况下数据处理加载完成状态，这些数据是从本地数据读取的。
点击“添加新项”，出现输入框，输入文字后回车提交数据：添加完成后将数据存储，同时添加DOM元素：考虑到功能最简化处理，点击已标为完成的任务，将提示“删除或重置为未完成”：以上功能为最核心功能，可以在此基础上进行扩展，比如任务分组，修改任务，任务提醒，网络同步数据等等。
下面开始相应的脚本内容。
为了避免全局变量，使用匿名函数方式，所有事件处理及数据绑定均在此函数中进行，同时定义与jQuery中的$()类似的函数：(function(){var $=function(id){return document.getElementById(id);}})();建立Tasks对象，定义show()函数和hide()函数，同时存储几个常用的DOM对象。
var Tasks = {show:function(obj){obj.className='';return this;},hide:function(obj){obj.className='hide';return this;//存储dom$addItemDiv:$('addItemDiv'),$addItemInput:$('addItemInput'),$txtTaskTitle:$('txtTaskTitle'),$taskItemList:$('taskItemList')}其中show()函数和hide()函数均使用了链式调用，每次执行此函数均会返回对象本身，这样对象就可以使用形如类似jQuery书写方式来使用此函数。