用Javascript编写Chrome浏览器插件

简介:

我为Chrome浏览器开发了一款插件,当我向朋友展示自己的插件时,受到他们的羡慕和称赞,那感觉酷极了!通过这次开发,我发现整个开发过程比较简单,有Javascript基础的朋友,都可以开发出属于自己的Chrome插件。

用Javascript编写Chrome浏览器插件

  插件开发流程

  1.开发语言和软件
开发语言就是Javascript,开发软件选择一款自己熟悉的纯文本编辑器就可以了,例如系统自带的记事本,或者支持语法高亮的UltraEdit

  2.设计插件
一个完整的插件是由4个部分组成,分别是manifest.json、.js文件、图标和HTML文件,设计插件就是设计这4类文件。manifest.json的作用是定义插件的属性,例如名称、版本、类型等;HTML文件具体实现插件的功能;.js文件是一个跟浏览器互动的脚本。

  3.载入插件
设计好上面几个文件后,就可以将插件载入浏览器中试用一下。首先将它们整理到同一个文件夹中,然后在Chrome的工具栏中选择“扩展程序”,进入扩展管理页,在右侧选择“开发人员模式”,再点击“载入正在开发的扩展程序”按钮,定位到这个文件夹,将整个文件夹载入Chrome中。

  4.发布插件
插件试用没有问题后,不妨将它发布出去让更多人使用。首先将插件所在的文件夹压缩成一个ZIP文件(别顺手压缩成了RAR文件)。然后再到扩展管理页,点击右下角的“获得更多扩展程序”链接,进入Chrome官方插件下载页面,在这个网页的左下角,你能看到“发布扩展程序”的链接,点击链接,上传ZIP压缩文件、添加插件的使用说明和截图,就可以发布插件了。

  插件设计过程

  1.制作图标

  图标的格式为PNG,大小为19×19像素的图标显示在地址栏右侧,大小为48×48像素的图标显示在扩展管理页。

  2. manifest.json

  manifest.json定义插件的属性,这个文件的格式比较固定,大家下载代码后,根据自己的实际需要进行简单的更改就可以用了。

 

 

以下是代码片段:


{"name": "Our Chrome Extension's Name",
"version": "1.0",
"description": "This is the first Chrome extension.",
"icons": { "48": "icon48.png" }, //定义图片的大小,可以自己更改
"page_action": { "default_icon": "icon19.png" },//定义图片的名称,可以自己更改
"background_page": "background.html",//定义HTML名称,可以自己更改
"permissions": [ "tabs" ],
"content_scripts": [{
"matches": ["http://*.google.com/*"],
"js": ["visit.js"]//定义.js文件名称,可以自己更改
}]}

 

  3. .js文件

  .js文件文件是连接浏览器和插件的桥梁,最基本的代码就是:chrome.extension.sendRequest();,它的作用是向Chrome的扩展管理程序发送一条请求消息,这条消息将被运行的插件HTML文件捕获。需要注意的是,在这个文件中,可以添加其他代码,例如一些优化代码。

  4. HTML文件

  HTML文件是插件的功能文件,插件要实现什么功能全靠这个文件。我以我开发的保持活跃在线插件为例,进行分析。我的插件,每隔一小段时间,随机打开论坛中的一个帖子。

  在这个插件中,我用到了几个API:chrome.pageAction.show(),用来在浏览器地址栏右侧显示插件的图标;chrome.windows.getCurrent(),用来获取当前浏览器窗口的ID; chrome.tabs.create(),用来建立一个新的标签页;chrome.tabs.remove(),用来关闭打开的标签页。

  这几个API比较基础,在插件开发中过程一般都用得到,如果要开发复杂的插件,则需要调用更多的API,到http://code.google.com/chrome/extensions去研究一下吧。

  

以下是代码片段:


<html><head><script>
var winid = 0;
var tabid = 0;
chrome.extension.onRequest.addListener( // 捕获.js文件中传来的请求消息
function(request,sender,sendResponse){ // 通过回调函数完成实际工作
chrome.pageAction.show(sender.tab.id);
chrome.windows.getCurrent(function(Win){ // 获取当前浏览器窗口的ID
winid = Win.id
});
circle();
}
);
function circle(){
radomURL = "http://bbs.pediy.com/showthread.php?t=" + Math.floor(100000 + Math.random()*6000); // 随机生成论坛一个帖子的URL
chrome.tabs.create({windowId:winid, url: radomURL, selected:false}, function(Tab){tabid = Tab.id}); // 打开上述URL
chrome.tabs.remove(tabid); //关闭这个标签页
setTimeout("circle()", 60000); // 每隔60秒,重复上述操作
}
</script></head></html>

本文转自博客园知识天地的博客,原文链接: 用Javascript编写Chrome浏览器插件,如需转载请自行联系原博主。

相关文章
|
7月前
|
Web App开发 人工智能 IDE
从痛点到解决方案:为什么我开发了Chrome元素截图插件
传统的截图方式要么截取整个页面然后手动裁剪,要么使用浏览器自带的截图功能,但效果都不理想。特别是当内容包含SVG元素或复杂样式时,截图质量和速度、便捷性往往不尽如人意。
303 4
|
7月前
|
Web App开发 人工智能 前端开发
产品发布策略:如何让Chrome插件在竞争激烈的市场中脱颖而出
Chrome Web Store每天新增很多个插件。插件刚发布,用户只有我自己,如何在这样的红海市场中找到自己的位置,是我一直在思考的问题。
293 0
|
9月前
|
机器学习/深度学习 人工智能 文字识别
浏览器AI模型插件下载,支持chatgpt、claude、grok、gemini、DeepSeek等顶尖AI模型!
极客侧边栏是一款浏览器插件,集成ChatGPT、Claude、Grok、Gemini等全球顶尖AI模型,支持网页提问、文档分析、图片生成、智能截图、内容总结等功能。无需切换页面,办公写作效率倍增。内置书签云同步与智能整理功能,管理更高效。跨平台使用,安全便捷,是AI时代必备工具!
671 8
|
12月前
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM(浏览器对象模型)
总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
346 23
|
11月前
|
Web App开发 人工智能 JavaScript
一键三连不求人!用 CodeBuddy 写个浏览器插件自动点赞、评论、收藏
本文介绍了一款通过 CodeBuddy AI 工具开发的浏览器插件,可自动完成“点赞、评论、收藏”三连操作。作者从需求出发,分四步实现:搭建基础框架、指定目标网页、解析内容并模拟点击事件,最后加载验证插件。借助 CodeBuddy 自动生成代码,整个过程高效便捷,大幅提升用户体验。此工具不仅节省手动操作时间,还为自动化任务提供了新思路,适合热爱技术与效率提升的网页冲浪者尝试。
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
494 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
Web App开发 前端开发 JavaScript
折腾之王:JavaScript之父Brave浏览器与BAT的诞生
2015年,JavaScript之父Brendan Eich再次创业,推出Brave浏览器和加密货币Basic Attention Token(BAT),旨在颠覆传统广告行业。Brave屏蔽广告、保护隐私,加载速度快;BAT则通过奖励机制让用户、内容创作者和广告主三方受益。尽管面临用户习惯和巨头竞争的挑战,Brave已拥有超4000万月活跃用户,成为全球增长最快的隐私浏览器,引领Web3生态发展。
511 22
折腾之王:JavaScript之父Brave浏览器与BAT的诞生
|
Web App开发 人工智能 JSON
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
AutoMouser是一款Chrome扩展程序,能够实时跟踪用户交互行为,并基于OpenAI的GPT模型自动生成Selenium测试代码,简化自动化测试流程。
1055 17
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
|
人工智能 程序员 测试技术
AI编程:Coze + Cursor实现一个思维导图的浏览器插件
本文是小卷关于AI编程工具学习的第3篇文章,通过开发一个思维导图生成工具,详细介绍了AI编程的完整流程。从需求分析、插件选择(如Coze的TreeMind),到创建测试工作流、发布API,再到整合API和开发浏览器插件,最终实现了用户选中文字后生成思维导图的功能。文章展示了如何利用现有工具高效开发,并总结了AI编程的优势与未来趋势。
1440 14