近期看到隔壁组开发写了一个Chrome扩展来提升Agile Planning的效率,动了也想鼓捣鼓捣的心思。然后上网百度(确实有点low了)一些资料来研究Chrome扩展具体是个啥东西~
主要参考资料来自于图灵社区的开源电子书籍:《Chrome扩展及应用开发》。感谢作者Sneezry和图灵社区的工作。其他的资料建议直接参考Google的官方文档:https://developer.chrome.com/extensions/getstarted 当然Google的东西还是需要自备梯子的,不方便使用梯子的看上面那本书来入个门应该够了。
Chrome扩展以及应用简单来说就是一系列文件的集合,这些文件包括HTML,CSS,JavaScript,图片以及manifest.json等。都是使用前端的技术开发,对于前端熟悉的同学在搞清楚基本结构和API之后应该可以轻松搞定。对于我这样的初级菜鸟来说,可以借这个机会结合实践来学习前端的知识。
扩展和应用是很像的东西,两者有很多共享的属性定义。扩展只能运行在Chrome内部,需要先运行Chrome再运行扩展。应用则可以直接调用Blink内核来独立工作。
在组成扩展或应用的一系列文件中,manifest.json是一个必备且必须叫这个名字的文件。这个文件是Chrome读取扩展/应用的入口,浏览器根据此文件来进行扩展的渲染。文件内容是按照一定格式描述的扩展/应用的相关信息,如扩展名称、版本、更新地址、请求的权限、扩展的UI界面入口等等。从文件的“扩展名”就可以看出,文件使用的是json格式来保存的信息,关于json格式的语法请自行百度~(很简单的)。
manifest中的大部分属性对于扩展和应用来说是共用的,个别的只能适用于其中一种,不能同时出现在同一个manifest文件中。
Chrome扩展的manifest必须包含:name, version, manifest_version
Chrome应用的manifest必须包含:name, version, manifest_version, app
其中manifest_version属性的值现在只能是2
其他常用可选属性有:browser_action, page_action, background, permission, options_page, content_scripts.
至此其实可以开始写一个很简单extension练手(例子来自上面那本书)。
目标是完成一个扩展,点击之后可以显示当前的时间。
首先是manifest.json文件
{ "manifest_version": 2, "name": "我的时钟", "version": "0.0.1.0", "description": "First Chrome Extension", "browser_action":{ "default_title": "My Clcok", "default_popup": "popup.html" } }
在上面的文件中,我们可以看到name属性定义了扩展的名称。description属性我们可以自己写一些对扩展的描述。version属性则定义了改扩展现在的版本,它最多可以有三个.分隔的四段数字组成,每段数字不超过65535且不能以0开头,但是可以为0. 如果扩展后续进行更新的话,新版本号必须比旧版本号高,比较顺序则从左向右分段比较。以上三个信息都将在扩展安装之后显示在Chrome的extension management页面。
browser_action属性指定扩展在浏览器中的行为。default_title为鼠标悬停在扩展图标上时显示的文字信息,default_popup是一个html文件地址,是指定扩展被点击后所显示的页面文件位置。
在看懂manifest中各个都是干嘛的之后,自然就该开始写那个popup.html
<html> <head> <style type="text/css"> * { margin: 0; padding: 0; } body { width: 200px; height: 100px; } div { line-height: 100px; font-size: 42px; font: Ariel; text-align: center; } </style> </head> <body> <div id="clock_div"></div> <script src="./my_clock.js"></script> </body> </html>
由于我们所显示的并不是一个完整HTML页面,所以其中省略了很多标准的tag,当然写出来也没问题,只是没啥用而已。另外值得注意的是其中通过script标签引用了一个外部的js文件。这是由于Chrome并不允许在HTML中直接嵌入JavaScript代码,inline-script也是被禁止的。所以引入外部js文件来实现事件以及元素与事件的绑定。
so……接下就需要实现那个my_clock.js
function my_clock(el){ var today = new Date(); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); m = m>10?m:('0'+m); s = s>10?s:('0'+s); el.innerHTML = h +":"+m+":"+s; setTimeout(function(){my_clock(el)},1000); } var clock_div = document.getElementById('clock_div'); my_clock(clock_div);
当当~~当~到此一个简单的显示时间的扩展就完成,将其加载到Chrome之中就可以看效果啦~(怎么加载?嘿嘿,你猜~~or百度一下?)
相关推荐
Chrome清单装载机npm install --save-dev chrome-manifest-loader extract-loader file-loader 适用于Webpack的Chrome清单加载程序支持Chrome,Firefox和Opera manifest.json 导入manifest.json定义的资产将package....
自动填充manifest.json并创建适当大小的图标,因此您不必这样做。 在开发模式下,它还会在服务器的根目录处创建一个index.html ,以便在扩展的各部分之间轻松导航,并提供指向chrome中实际扩展页面的链接(例如...
这是一个浏览器扩展(插件)的基础框架,基于 Vue3、Chrome Extension V3、Tailwind CSS UI。 package.json 部分内容如下 "core-js": "^3.8.3", "vue": "^3.2.13", "vue-router": "^4.0.3", "vuex": "^4.0.0" ...
manifest.json的文件 3、打开这个 manifest.json文件,可以理解为配置文件 :slightly_smiling_face: 包含以下内容 代码如下: { “name”: “My First Extension”,//扩展的名字 “version”: “1.0”, //版本 ...
Chrome扩展程序的根文件夹中必须有manifest.json文件。 该清单告诉Chrome如何创建扩展程序以及如何运行该扩展程序。 在清单中,您将配置徽标,扩展名和说明等内容。 由于您希望将清单作为构建根文件夹的一部分,因此...
3:manifest.json文件,存放描述信息,也可以理解为插件运行的总入口,使用JSON的格式进行定义 { "name": "My First Extension", //程序名称 "version": "1.0", //版本 "description": "The first extension that...
将manifest.json.sample重命名为manifest.json 。 打开manifest.json并将标题更改为您的 Web 应用程序的名称。 在permissions列表中,列出应启用此扩展名的域名,端口和协议。 ,但它应该像添加一个或多个带有...
该启动器包括以下部分背景脚本(香草TS) 内容脚本(香草TS) 选项页面(Vue.js,Sass) 弹出页面(Vue.js,Sass) DevTools面板页面(React.js,样式化组件) 并且,当然是描述其配置的./manifest.json文件。...
编辑 manifest.json 文件的字段,如 "name": "Extension Name", "default_popup": "file_name.html to open on click extension pinned"。 点击右上角的“开发者模式”,见上图。 ...然后点击上图左上角的“Load ...
一个带有 AngularJS 的 ...构建manifest.json文件是manifest-build.json 。 它与常规manifest.json不同,仅使用构建文件(所有弹出应用程序、内容脚本或后台页面的单个文件)。 要构建应用程序并为每个弹出应用程序、
manifest.json文件是必需的创建基本的Chrome扩展程序的步骤: 第1步:创建一个新目录来存储扩展文件: 步骤2:添加一个名为manifest.json的文件(必填) 第三步:添加文件:popup.html 步骤4:添加图片/图标(本例...
Navet 的 Chrome 扩展直接在您的 Chrome 浏览器中查看 Navet 即将举行的活动。安装网店版本该扩展程序可在安装开发者版本... 如果您编辑manifest.json ,则需要在chrome://extensions重新加载插件 (ctrl+r / cmd+r)截屏
运行npm run start 按照以下步骤在Chrome上加载扩展程序: 访问chrome://extensions/ 检查Developer mode 点击Load unpacked extension 选择build文件夹。 玩得开心。结构您所有扩展的开发代码都必须放在src文件夹...
在src/manifest.json上更改扩展名。 yarn run start 请按照以下步骤在Chrome上加载扩展程序: 访问chrome://extensions/ 检查Developer mode 单击Load unpacked extension 选择build文件夹。 玩得开心。 ...
(猫头鹰来)用法请在manifest.json和config.js设置你的 owl url。 然后,将此插件导入 Chrome。 // manifest.json"permissions": [ "http://owl.example.com/"] // config.jsvar config = { owlUrl : ...
ReactChrome扩展程序示例 内置的Chrome扩展程序的基本样板: React16.4 Redux 4 ESLint(airbnb风格) ... 在src/manifest.json上更改扩展名。 yarn run start 按照以下步骤在Chrome上加载扩展程序: 访问ch
它包括manifest.json文件和其他静态内容。 src/background.js是chrome扩展程序的主要背景js文件。 src/popup-page是目录,其中包含针对弹出页面的react js设置。 src/content-scripts是目录目录,其中包括用于...
当您单击Chrome中的扩展程序时资料夹结构创建后,您的项目应如下所示: my-app/ README.md node_modules/ package.json public/ index.html favicon.ico logo.svg manifest.json src/ App.css App.js App....
Chrome扩展程序入门...- main file of extension popup├── manifest.json <- chrome extension configuration file├── background│ └── background.ts <- entry point for background bundle├──
要在您的网站上使用该插件,您需要将该网站的网址添加到extension/manifest.json文件中。 有2个选项: 具有更改清单的fork扩展并将其发布在chrome网站商店上 发表问题,我会将您的网站添加到列表中 对于开发,您...