chrome插件开发快速入门

chrome插件开发快速入门

一、快速创建一个插件开发项目工程。

效果图
在这里插入图片描述

1、创建一个工程文件夹(hello)、新建文件‘manifest.json’。
(让chrome浏览器识别该工程为插件)。

在这里插入图片描述

2、编辑‘manifest.json‘文件

{
	//插件名字
	"name": "ww",
	"version": "1.0",
    "manifest_version": 2,
    "description": "插件描述",
    "browser_action": {
    	//插件图标
		"default_icon": "./images/hb.png",
		"default_title": "标题"
	},
	//全部许可
	"permissions": [
		"tabs",
    	"https://*/*",
    	"http://*/*"
	],

  	"content_scripts": [
        {
        	//作用的url
			"matches": ["<all_urls>"],
			//作用的js
            "js": ["jquery-1.11.3.min.js", "getinfo.js"]
        }
    ]
}

3、‘manifest.json‘文件中起作用的js文件为jquery-1.11.3.min.js", “getinfo.js”。
jquery-1.11.3.min.js自行搜索下载
新建getinfo.js 我们在这里写代码。

在这里插入图片描述

4、编辑getinfo.js,写一个demo,在百度搜索按钮旁边嵌入标签。效果如图。

在这里插入图片描述

5、查看“百度一下”按钮的id。

在这里插入图片描述

6、开始写js代码 编辑getinfo.js

$("#su").before(
			 '<a class="oprate dzhqy-view-btn" id="test"> 一个标签</a>'
		 );

7、安装插件

在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值