chrome扩展的开发

yedf 发布于2019-08-19 18:16 / 462人阅读

摘要：这是本人写的第一个扩展，这个扩展的普遍适用性不强，但是确实很方便，具体的开发流程写在这里，感兴趣的看官可以试着自己动手写一写这个扩展的作用是，它的适用场景是更换百度搜索页的关键词，并且跳转，如果你理解了这个意思，那你一定会想这能有什么用，是

这是本人写的第一个chrome扩展，这个扩展的普遍适用性不强，但是确实很方便，具体的开发流程写在这里，感兴趣的看官可以试着自己动手写一写

这个扩展的作用是change query，它的适用场景是更换百度搜索页的关键词，并且跳转，如果你理解了这个意思，那你一定会想『这能有什么用？』，是的，这在具体生活和工作中一点用处都没有，它仅仅对笔者和笔者身边的产品与测试有一点用处，笔者这两个月的开发任务是一组query下的百度搜索结果页卡片。在这里，笔者想说自己开发chrome扩展更多的是满足自己的切身需要，因地制宜

下面主要介绍具体开发流程

manifest.json配置文件

第一步就是创建manifest.json配置文件：

manifest_version、name和version为必选，其它为可选

这个文件中manifest_version默认为2

name、version和description很明显，其中version要书写规范，且递增

icons是一个对象，key是像素值，value是图片地址，chrome会选取合适像素的图片在合适的位置（右上角还是扩展程序页面）当做logo

background指后台执行环境，指定js文件就可以，因为后台基本没有展现页面的需要

permissions指都用到了哪些权限，本地保存的权限，操作tab页的权限等，这些权限要在这里声明

browser_action指左键点击右上角logo弹出的页面，这个页面在点开的时候加载出来，收回的时候被销毁

options_page指右键点击右上角logo弹出列表中的选项是否可点，与可点时左键点击打开的页面

content_scripts指可以在chrome窗口页运行的js文件，matches用来匹配哪些url的窗口页运行

{
    "manifest_version": 2,
    "name": "Change query",
    "version": "1.0",
    "description": "快速切换导入列表中的query",
    "icons": {
        "48": "img/icon48.png"
    },
    "background": { "scripts": ["./js/background.js"] },
    "permissions": [
        "storage",
        "tabs"
    ],
    "browser_action": {
         "default_icon": {
            "38": "img/icon38.png"
        },
        "default_popup": "popup.html"
    },
    "options_page": "options.html",
    "content_scripts": [
        {
            "matches": [
                "http://*.baidu.com/",
                "https://*.baidu.com/"
            ],
            "js": ["js/open.js"]
        }
    ]
}

chrome主要提供了三个运行环境，background后台持续运行环境，browser_actionlogo弹出页短暂运行环境，content_scripts用户正在浏览页面的操作环境，这个环境里可以操作页面内的元素，但是与页面内的原始js是各自独立的，这三个环境可以通过chrome提供的runtime接口来实现通信，通过runtime接口还可以在不同扩展间通信

开发browser_action页面

笔者开发的这个chrome拓展，功能很小，只用到了browser_action页面，本文也将只介绍browser_action页面的开发，下面是html代码：

这里需要注意的是:

不可以在html页面里面直接写js代码，只能引用js文件

上文提到的，这个页面点开创建页面，收回销毁页面，不会保存变量信息

Change query拓展的用处

html上面的元素很简单，一个textarea，一个ul，三个button。本拓展的逻辑是在textarea中粘贴进query列表，点击『提交』按钮，接下来通过点击『上一个』或『下一个』来切换相邻query，跳转到相应的结果页面

这个拓展开发的目的很简单，在开发完成后，要对所有的搜索query进行确认，需要在编辑器上复制query，粘贴到输入框回车，切换起来很繁琐，所以开发了这个一次性复制粘贴query，然后在拓展上点击就可以轻松切换query，节省测试时间

第一步，点开popup页：

第二步，复制query列表，粘贴进textarea：

第三步，提交：

第四步，点击下一页：

可以看到飘红的query是当前搜索的query：

Change query拓展用到的API

只用到了两个API，chrome.storage.local与chrome.tabs，使用这两个API需要在manifest.json文件的permissions中添加『storage』和『tabs』

chrome.storage.local用来本地存储数据，具体使用的两个方法：

chrome.storage.local.set({});
chrome.storage.local.get(null, function(data) {});

chrome.tabs用来操作tab页，具体使用的方法：

// 获取当前用户正在浏览的tab页的url
chrome.tabs.query({active: true}, function(tabs) {
    self.url = tabs[0].url;
});
// 监听当用户切换tab页时，获取切换到的tab页的url
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    self.url = tab.url;
});
// 操作当前tab页跳转url
chrome.tabs.update(null, {url:nextUrl});

本项目的下载地址：点击下载

总结

chrome拓展商店里有很多优秀的拓展可以方便我们的生活与工作
chrome拓展开发很简单，多多动手，科技改变生活

对想学习更详细chrome拓展的同学，推荐这里学习：

官网网站

Chrome扩展及应用开发

中文API

文章转载自笔者个人博客 Gaoxuefeng"s Blog

服务器托管私有云 chrome webrtc 开发开发扩展扩展开发 php扩展开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79404.html

chrome扩展应用开发快速科普

摘要：扩展应用模块功能介绍扩展应用由很多部分组成，其中主要模块为为了避免由于翻译原因导致的问题，因此在下文中对相关模块的称呼一律采用上面的英文。附录官方开发文档英建议有英文阅读能力的人阅读此文档。概述本文通过对chrome插件的各个部分进行快速的介绍，从而让大家了解插件各个部分的关系，并且知道如何将其进行组装成一个完整的chrome插件。由于chrome官方文档中对于如何从零开发一个c...

MockingBird 2019-08-22 16:07 评论0 收藏0
了解Chrome扩展程序开发

摘要：了解扩展程序开发本文大量借鉴图灵电子书扩展及应用开发首发版首先，我尝试来用简单几句话描述一下扩展程序扩展主要用于对浏览器功能的增强，它强调与浏览器相结合。提供了接口，允许扩展对用户的历史进行管理。了解Chrome扩展程序开发本文大量借鉴图灵电子书-Chrome扩展及应用开发（首发版）首先，我尝试来用简单几句话描述一下Chrome扩展程序： Chrome扩展主要用于对浏览器功能的增...

lemanli 2019-08-21 18:46 评论0 收藏0
chrome扩展开发之旅第一篇

摘要：扩展及应用介绍与区别介绍支持开发者为其编写各种各样的扩展与应用来扩充其功能。用处安装扩展之后，就会读取扩展中的文件。结语以上就是第一章的总结，接下来的笔记，敬请期待原书项目代码下载扩展及其应用开发读书笔记介绍寒假想自己做一个chrome扩展，便从图书馆借了这本书。同时，为了培养自己的好习惯，做沉淀，便读一章写一篇总结，全书总共10章，将会分为10篇博文。欢迎大家多多指正，也希望大家...

lei___ 2019-08-19 17:25 评论0 收藏0
Chrome 扩展开发——编写一个自己的浏览器插件

摘要：配置文件每一个扩展都有一个格式的文件，叫。此消息发送后会触发扩展内每个页面的事件。和持续长时间的保持会话需要在和扩展建立一个长时间存在的通道。内容脚本发送消息到扩展程序建立通道，并给通道命名利用通道发送一条消息。这次的练习是做一个Chrome的扩展，分享一下入门开发过程。因为在消息传递那块纠结了特别久，所以我会重点总结消息传递那块。这次做这个插件的功能很简单，就是点击按钮后可以对当...

SunZhaopeng 2019-08-20 11:09 评论0 收藏0
Chrome 插件特性及实战场景案例分析

摘要：实现方案对页面中涉及文案进行修改，绑定多语言值。利用插件支持跨站请求的特性，向多语言平台直接发送修改请求。异常处理利用插件可以获取浏览器中特性，新开一个标签页打开多语言后台，进行登录，登录成功后就可以实现请求的授权修改了。一、前言提起Chrome扩展插件(Chrome Extension)，每个人的浏览器中或...

番茄西红柿 2021-11-24 09:39 评论0 收藏2637
# 编写第一个Chrome Extension

摘要：可以加载到内，通过操纵浏览器，从而完成一些定制的工作。一个最低需求的文件是必要的可选的图标等。如果这样验证都是如期望的话，就表明你的第一个扩展已经开发成功。正式发布可以在内发布扩展，只要点击进入后，按照操作指示即可。 Chrome Extension可以加载到Chrome内，通过操纵Chrome浏览器，从而完成一些定制的工作。假设你想要一个功能，它可以在你点击上下文菜单项目时剪贴当前...

joyqi 2019-08-23 13:50 评论0 收藏0