【chorme插件开发】第二节:插件的配置文件说明及素材

manifest文件配置详情

name :插件名称
version :版本号
mainfest_version :指定清单文件格式版本 必填
description :插件描述 
browser_action :设置扩展信息栏的图标,点击后可以看到图标的悬浮菜单
{
default_icon:浏览器工具栏中显示的默认图标
default_popup:点击工具栏图标弹出的窗口
default_title: 鼠标在工具栏图标悬停会显示的悬浮提示
}
permissions :用于设置插件向浏览器申请的权限信息
[
"tabs" //访问插件的选项卡
"history" //读取与修改用户的浏览器的及插件浏览记录
"cookies" //读取与修改Cookie
"events" //监控事件,可以随时通知
"downloads" //监视、操纵、搜索下载的文件
"http://*/*" //访问链接的权限
]

manifest文件必填属性:name

插件的名称,浏览器读取进行显示插件基本信息的一个字段

manifest文件必填属性:version

插件的基本版本号,用于搭配update_url 参数进行使用。

manifest文件必填属性:manifest_version

设置清单文件格式的版本,新版本内核可以设置默认 2 ,如果是老版本的需要官网查询一下;

man

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
以下是一个简单的Chrome插件编写例子的源码: manifest.json文件内容: ``` { "manifest_version": 2, "name": "My First Chrome Extension", "version": "1.0", "description": "一个简单的Chrome插件示例", "permissions": [ "activeTab" ], "browser_action": { "default_popup": "popup.html" }, "icons": { "16": "icon.png", "48": "icon.png", "128": "icon.png" }, "background": { "scripts": ["background.js"], "persistent": false }, "content_scripts": [ { "matches": ["http://*/*", "https://*/*"], "js": ["content.js"] } ] } ``` popup.html文件内容: ``` <!DOCTYPE html> <html> <head> <title>My First Chrome Extension</title> <style> body { width: 300px; height: 200px; font-family: Arial, sans-serif; font-size: 14px; } h1 { text-align: center; } #btnClick { width: 100px; height: 30px; margin: 0 auto; display: block; background-color: #4CAF50; color: white; border: none; border-radius: 3px; cursor: pointer; } </style> </head> <body> <h1>Welcome to My Chrome Extension</h1> <button id="btnClick">Click Me</button> <script src="popup.js"></script> </body> </html> ``` popup.js文件内容: ``` document.addEventListener("DOMContentLoaded", function() { var btnClick = document.getElementById("btnClick"); btnClick.addEventListener("click", function() { chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, {action: "show_notification"}, function(response) { console.log(response); }); }); }); }); ``` background.js文件内容: ``` chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { if (request.action === "show_notification") { var notificationOptions = { type: "basic", iconUrl: "icon.png", title: "消息通知", message: "这是一条来自插件的通知!" }; chrome.notifications.create("", notificationOptions, function(notificationId) { sendResponse(notificationId); }); } return true; }); ``` content.js文件内容: ``` chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { if (request.action === "show_notification") { alert("插件发送的通知!"); sendResponse("通知已显示"); } }); ``` 这个例子实现了一个简单的Chrome插件,当我们在浏览器中点击插件图标的按钮时,会向当前激活的标签页发送一个消息,然后在标签页中弹出一个通知。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

任聪聪

创作不易,你的打赏是我的动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值