Chrome扩展程序（插件），用你开发的脚本在浏览器上随心所欲

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

Chrome扩展程序插件用你开发的脚本在浏览器上随心所欲

Google Chrome扩展程序是用来向Google Chrome添加或修改功能的浏览器扩展程序。这些扩展程序使用HTML、JavaScript和CSS语言编写而成。Google Chrome扩展程序可在Chrome网上应用店下载其前身为Google Chrome扩展程序中心。截止于2010年2月已发布了超过2200个扩展程序。所有使用Google账户的用户均可在开发者提交扩展程序并审核通过后安装。

简单来说Chrome插件是为Chrome浏览器添加功能的小程序。chrome插件可以获取网页内容并操作网页内容如爬取网页数据爬虫、自动点击定时点击或刷新、修改网页内容如更改网页文字或图片等

Chrome插件的文件结构

在开始正式开放前我们得先清楚Chrome插件的文件结构通常一个Chrome插件由以下几个部分组成

  • manifest.json必须是插件的配置文件包含插件的名称、版本号、图标、权限等信息。
  • *.html用于向用户展示信息并与用户交互的界面如插件的设置界面等。
  • js/*.js用于实现插件的逻辑功能并不要求必须放在js文件夹下。
  • img/*.png插件需要的图片如插件图标等文件类型不必是png文件夹必须。
  • css/*.css插件中用到的css如对网页样式进行修改时用到的css文件。文件夹非必须。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5SxROMK2-1673870350689)(https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3649c7ac-9b25-4133-a090-f18efe16b067/Untitled.png)]

Hello_World编写

我们先尝试一些扩展程序的基本运用编写Hello_World程序导入扩展程序后点击运行即弹出“你好”。

  1. 我们用vscode打开创建好的Chrome插件架构的文件夹先编辑manifest.json配置文件如下

    {
    "manifest_version": 3,              // manifest版本号
    "name": "helloWorld",               // 插件名
    "version": "1.0",                   // 插件版本
    "description": "hello world 插件",  // 插件描述
    "icons": {                          // 插件图标Chrome给我们提供了3种大小图标128*128、48*48、16*16只要你提供的图片的大小大于这3种即可 
        "128": "img/test.png",
        "48": "img/test.png",
        "16": "img/test.png"
    },
    "browser_action": {                 // 在浏览器中执行时
        "default_icon": "img/test.png", // 默认图标
        "default_popup": "popup.html"   // 点击图标时弹出界面
    }
}

  2. 我们开始编写popup.html即运行插件时弹出的界面如下

    <html>

<head>
    <title>hello world</title>
    <meta charset="utf-8" />
</head>

<body style="width: 200px;height: 200px;">
    <h1 id="message">你好</h1>
</body>

</html>

  3. 将整个文件夹拖拽至Chrome扩展程序中安装如下

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fvRhQ6EK-1673870350691)(https://s3-us-west-2.amazonaws.com/secure.notion-static.com/538af360-0cfa-4866-8ec2-68e4ebcbf93b/Untitled.png)]

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kZIkiGz4-1673870350691)(https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b17afb69-b026-4575-ae48-b98e45720f45/Untitled.png)]

  4. 你可以在扩展程序中找到它并双击运行它

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6CD16aT3-1673870350692)(https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a7ab7797-09c8-4648-9d58-c9a76fdf0334/Untitled.png)]

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3uZSl83I-1673870350693)(https://s3-us-west-2.amazonaws.com/secure.notion-static.com/830b360c-6fdc-4cb6-8098-d9ee4932bd65/Untitled.png)]

利用JavaScript实现Hello Everything

接下来我们尝试在插件中使用JavaScript在popup.html中添加input标签使界面显示内容随着input中输入的内容而改变。

  1. 在popup.html中引入js并添加input标签

    为了图方便我们同时还引入jquery-3.6.3.min.js如下

在这里插入图片描述

  1. 编写popup.js实现功能

    $(function() {
    $('#input1').keyup(function() {
        $('#message').text('你好' + $('#input1').val());
    })
})

重新部署效果如下

在这里插入图片描述

灵活运用浏览器的存储storage

接下来我们来尝试一下利用浏览器的存储storage实现一个浏览器缓存金额的累加写入和读取。

  1. 首先我们要在manifest.json中新增配置permissions添加至manifest.json最后即可如下

    {
	......
	"permissions":[
	    "storage"             // 允许缓存
	]
}

  2. 修改html代码如下

    <html>
    <head>
        <title>hello world</title>
        <meta charset="utf-8"/>
        
        <script src="js/jquery-3.6.3.min.js"></script>
        <script src="js/popup.js"></script>
    </head>
    <body style="width: 400px;height:400px;">
        <h2>总金额<span id="total"></span></h2>
        <h2>本次使用<input type="text" id="amount"/></h2>
        <input type="submit" id="add" value="添加"/>
    </body>
</html>

  3. 修改popup.js实现从浏览器中获取存储金额等效果如下

    $(function(){
    chrome.storage.sync.get('total',function(budget){
        $('#total').text(budget.total);
    });
    $('#add').click(function(){
        // 1.从浏览器中获取存储的金额
        chrome.storage.sync.get('total',function(budget){
            var totalAmount = 0;
            if(budget.total){
                totalAmount = parseFloat(budget.total);
            }
            // 2.将本次金额加到总金额并存储
            var amount = $('#amount').val();
            if(amount){
                totalAmount += parseFloat(amount);
                chrome.storage.sync.set({'total':totalAmount});
            }
            // 3.更新显示ui
            $('#total').text(totalAmount);
            $('#amount').val('');
        }) 
    })
})

options_Page基本用法

options_page主要用于一些参数的设置以谷歌翻译扩展举例如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vvlSAb5W-1673870350700)(https://s3-us-west-2.amazonaws.com/secure.notion-static.com/db28ce9e-2050-4b74-b3a5-dba5037de840/Untitled.png)]

如何配置呢简单如下

  1. 在manifest.json中配置options_page界面如下

    {
	......
	"options_page": "options.html"
}

  2. 编写options配置的option.html界面即可

电脑发通知 - Notifications的应用

应用Notifications当达到通知条件时会在电脑右下角弹框提醒。Notifications的配置也比较简单在manifest.json中添加如下代码

{
	......
	"permissions":[
	    "notifications"             // 允许通知
	]
}

在这里插入图片描述

普通界面右键菜单 - contextMenus

有时候我们想在任意界面上右键直接进行相关插件操作而不是每次都要点击插件运行这时候我们可以将插件相关功能直接放界面右键菜单中如下

在这里插入图片描述

要想实现这个效果也不难实现步骤如下

  1. 开启界面右键菜单权限并在manifest.json中配置插件后台声明如下

    {
	......
	"background":{
		"scripts": ["js/evenPage.js"], // 后台运行的js代码
		"persistent": false            // 是后台一致运行(true)还是事件(右键)触发(false)
	},
	"permissions":[
		......
		"contextMenus"                 // 运行上下文菜单(右键菜单)
	],
	......
}

  2. 编写后台运行的js代码主要两步

    1. 创建contextMenus
    2. 为contextMenus添加点击事件的监听

    如下参考

    // 1.创建contextMenus
var contextMenu = {
    id: "addAmount",
    title: "添加消费",
    // contexts:page,video....
    contexts: ["selection"]
}
chrome.contextMenus.create(contextMenu);
// 2.为contextMenus添加点击事件的监听
chrome.contextMenus.onClicked.addListener(function(clickData){
    // clickData.menuItemId:被点击的菜单选项卡的id
    // clickData.selectionText:选中的内容
    if(clickData.menuItemId == "addAmount" && clickData.selectionText){
        // 执行任务
				......
    }
});

为插件添加徽章 - badge

什么是为插件添加徽章效果如下

在这个插件的右下角有个数字显示这个就是badge。badge通常用于显示一些数量等等

在这里插入图片描述

如何设置呢同样简单在后台运行的js中添加上如下代码即可

chrome.storage.onChanged.addListener(function(changes,storageName){
    // changes.total.newValue:总金额变化后的值
    
    // 设置徽章文本
    chrome.browserAction.setBadgeText({"text":changes.total.newValue.toString()});
    // 设置徽章背景颜色
    chrome.browserAction.setBadgeBackgroundColor({"color":[0,255,0,255]});
});

编写针对特定页面的插件 - pageAction

我们想要将插件只允许在特定页面其他界面都不允许运行的话可以进行如下操作

  1. 在manifest.json中配置tab如下

    {
	...
	"permissions":[
      "tabs"         // 允许运行的tab页面
  ]
	...
}

  2. 后台运行的js中配置pageAction如下

    chrome.tabs.query({currentWindow:true,url:"https://www.taobao.com/"},function(tabs){
   chrome.pageAction.show(tabs[0].id); 
})

向页面注入代码 - content_script

接下来我们来介绍一下向指定页面注入代码只需要在manifest.json中进行如下配置即可

{
	...
	"content_scripts":[
		"matches": ["匹配的网站"],
		"js": ["注入的js代码"]
	],
	...
}

补充

平常我们的Chrome插件都是安装在哪里呢如下

Chrome 技巧篇-已安装的crx插件源码查看插件安装位置查看方法

Python脚本和JavaScript脚本对比如何呢如下

更多详细操作可前往官方文档学习Chrome 扩展开发文档

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
返回列表

上一篇：PaddleNLP开源UTC通用文本分类技术，斩获ZeroCLUE、FewCLUE双榜第一

下一篇：深入使用noexcept

“Chrome扩展程序（插件），用你开发的脚本在浏览器上随心所欲” 的相关文章

Python 异步集群使用1年前 (2023-02-02)
学习笔记——Mybatis动态SQL1年前 (2023-02-02)
Racket while循环1年前 (2023-02-02)
Web前端学习笔记4——CSS1年前 (2023-02-02)
【FAQ】推送服务常见问题及解决方案1年前 (2023-02-02)
Ansible 学习笔记1年前 (2023-02-02)
ChatGPT 会开源吗？1年前 (2023-02-02)
【微服务】springboot 实现elasticsearch索引数据迁移1年前 (2023-02-02)
量子计算（二十）：量子算法简介1年前 (2023-02-02)
你知道哈希算法，但你知道一致性哈希吗？1年前 (2023-02-02)

阿里云国际版