chrome浏览器插件开发视频教程第2课插件的文件结构

最新推荐文章于 2024-06-28 14:03:09 发布

__畫戟__

最新推荐文章于 2024-06-28 14:03:09 发布

阅读量367

点赞数

分类专栏：浏览器插件文章标签： chrome插件开发浏览器插件开发浏览器插件 chrome插件浏览器扩展

原文链接：https://www.toolchest.cn/?p=15

版权

浏览器插件专栏收录该内容

5 篇文章 1 订阅

订阅专栏

视频教程和源码见文章结尾

大家好，这是我们课程的第2课，在我们正式开始开发插件前，我们先来了解一下一个chrome插件的构成，通常一个chrome插件包含以下几个部分：

chrome插件源码结构

下面我们以一个记账插件的部分源码举例说明。

1.manifest.json

插件的配置文件，包含插件名称、版本号、图标、权限等信息，每个插件必须有该文件。示例：

{
    "manifest_version": 2,
    "name": "budgetManager",
    "version": "1.0",
    "description": "hello world 插件",
    "icons":{
        "128":"img/logo.png",
        "48":"img/logo.png",
        "16":"img/logo.png"
    },
    "browser_action":{
        "default_icon":"img/logo.png",
        "default_popup":"popup.html"
    },
    "background":{
        "scripts": ["js/eventPage.js"],
        "persistent": false
    },
    "permissions":[
        "storage",
        "notifications",
        "contextMenus"
    ],
    "options_page": "options.html"
}

2.html文件

用于向用户展示信息并与用户交互的界面，如插件的设置界面等，若不需与用户进行交互不需要此类文件。示例：popup.js

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

3.javaScript文件

用于实现插件的逻辑功能，是我们学习插件开发需要重点关注的部分。示例：js/eventPage.js

// 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){
        var amount = parseFloat(clickData.selectionText);
        // 1.从浏览器中获取存储的金额
        chrome.storage.sync.get(['total','limit'],function(budget){
            var totalAmount = 0;
            if(budget.total){
                totalAmount = parseFloat(budget.total);
            }
            // 2.将本次金额加到总金额并存储
            
            if(amount){
                totalAmount += amount;
                chrome.storage.sync.set({'total':totalAmount},function(){
                    if(totalAmount > parseFloat(budget.limit)){
                        var notifyOptions = {
                            // type:basic,imge,simple,list
                            type: 'basic',
                            title: '金额超出限制',
                            iconUrl: 'img/logo.png',
                            message: '您消费的总金额已超出上限'
                        }
                        chrome.notifications.create('limitNotify',notifyOptions);
                    }
                });
            }
        });
    }
});

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]});
});

4.css文件

用于设置插件的html样式，或者用于向浏览器打开的网页中注入的样式文件，可以实现对浏览器打开的网页进行样式修改。示例：css/content.js

#bottom_layer .s-bottom-layer-content{
    background-color: blue;
}

5.图片文件

用于设置插件的图标，或者用于改变浏览器打开的网页的图片，如更改网页背景图片、向网页中添加图片等。

打开视频教程

关注公众号查看作者学习方法和心得，快速上手高效学习

chrome浏览器插件开发视频教程第2课插件的文件结构插图1

版权声明：本文为博主「ROSHAN」的原创文章

原文链接：Chrome浏览器插件开发视频教程第1课初识chrome插件-roshan的博客

__畫戟__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录