一个简单的chrome拓展程序开发

vslam 发布于2019-08-20 12:23 / 490人阅读

摘要：相当于发一个命令。这个函数能获取到当前标签的信息对象并传递给回调函数。向标签页中的发送消息。接收到消息，执行操作。会弹出一个控制台。这样我们就完成了一个简单的插件。

最近突然觉得有些常用的功能可以写成浏览器插件，就不用把代码放到console控制台运行了。只要点击插件图标就可以自动运行。会方便很多。就去查了下chrome插件开发教程。本质上讲，chrome插件就是以一些特殊的方式运行一些特定的html,css,JavaScript代码，前端同学们学起来还是很容易的。

比较好的中文的参考资料：
1.360翻译的文档：http://open.chrome.360.cn/ext...
2.Chrome扩展及应用开发：http://www.ituring.com.cn/min...

我们做一个简单的插件：实现点击插件图标可以给页面上所有的a标签加上一个target="_blank"，让点所有链接都在新页面打开。
我们开发的应用这样使用：

1.建立一个文件夹。a chrome plugin。
2.新建配置文件　manifest.json。前端同学们对于这样的配置文件一定不陌生。
里同包含了版本号，插件名称，默认页面，content_scripts，permissions等基本信息。
这个文件能将我们插件中的的js，css,JavaScript文件组织起来。
具体每个参数的含义见文档：http://open.chrome.360.cn/ext...
代码：

{
    "manifest_version": 2,
    "name": "A",
    "version": "1.0",
    "description": "新标签打开链接",
    "browser_action": {
        "default_popup": "popup.html"
    },
    "content_scripts":[
        {
            "matches": ["http://*/*","https://*/*"],
            "js": ["back.js"],
            "run_at":"document_end"
        }
    ],
    "permissions": [
        "tabs"
    ]
}

3.建立文件。popup.html。
对应配置文件中的 "default_popup": "popup.html"。

点图标的时候我们会加载运行这个html，运行这个html引入的js。
这是一个普通的html页面。里面可以写css。也可以加载JavaScript文件。也可以给里面的节点添加事件什么的。
不过这个文件以及加载的js无法访问当前我们打开的标签页中的dom节点。
代码：



    


    这是popup.html里面。

这里只用来加载一个js。

4.popup.js。　popup.html引入的js。这里我们用户它的做的事是向content_scripts中发送一个消息。相当于发一个命令。告诉content script，去办事吧。content_scripts的内容在后面，看完再回过来看一次这里。

    chrome.tabs.getSelected(null, function(tab) {
        chrome.tabs.sendRequest(tab.id, {greeting: "hello"}, function(response) {
            // console.log(response.farewell);
        });
    });

chrome.tabs.getSelected()这个函数能获取到当前标签的信息对象并传递给回调函数。　
获取到tabId就是tab.id。可以自己console.log(tab)出来看一下。文章后面有对应调试控制台的打开方式。tab相关的接口可以查看：http://open.chrome.360.cn/ext...　很多接口都要用到这个参数：tabId ( integer )，其实就是用这个接口拿到tabId。

chrome.tabs.sendRequest()这个函数是向某个标签的content_script中发送一个消息。也需要tabId这个参数。chrome插件之间的通信接口可查看：http://open.chrome.360.cn/ext...

5.back.js。也是我们这个插件中的content script。
这个文件是我们插入到当前标签页中运行的代码。它可以访问标签页面中的dom节点。
我们这里用它来是监听消息，消息来了就运行设置标签的函数。操作标签页中的dom节点。

对应配置文件中content_scripts下的back.js。
这个参数中的内容会被加载到当前打开的网页中，可以访问当前标签页的节点。
所以，我们对页面的操作往往会写在这个脚本里。有需要的话甚至可以加载个jQuery到里面。
但是这里的JavaScript与网页上原本的JavaScript不是一个环境下运行。具体区别可以自己去看开发文档。http://open.chrome.360.cn/ext...
代码：

function setA(){
    var aDoms = document.getElementsByTagName("a");
    var len = aDoms.length;
    for (var i = 0; i < len; i++) {
        aDoms[i].setAttribute("target","_blank")
    }
}
chrome.extension.onRequest.addListener(
    function(request, sender, sendResponse) {
        if (request.greeting == "hello"){
            setA();
            // sendResponse({farewell: "goodbye"});
        }else{
              // sendResponse({});
          }
      }
      );

可能比较要注意的一点是popup.html与content_script之间的通信。
popup.html向标签页中的content_script发送消息。
content_script接收到消息，执行操作。

6.调试方式：
popup.html加载的js调试。
右键点击插件图标，选择审查弹出内容。（或者在弹出框里右键点击检查。）会弹出一个控制台。
点source可以看到我们的html和js资源。

content_script的调试：
打开页面控制台，点sources，然后点Contents scripts，可以看到浏览器插件会作用到页面的代码。

注意每次修改了代码要重新加载插件。

这样我们就完成了一个简单的chrome插件。

github:https://github.com/liusaint/J...
本文同步发表在我的csdn博客上：http://blog.csdn.net/liusaint...

云服务器 GPU云服务器开发简单的小程序简单的爬虫程序简单的小程序开发简单的小程序

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

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

chrome扩展的开发

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

yedf 2019-08-19 18:16 评论0 收藏0
《JavaScript高级程序设计》（第3版）读书笔记第11章 DOM拓展

摘要：对的两个主要拓展是选择和。以下插入标记的拓展已经纳入了规范。在写模式下，会根据指定的字符串创建新的子树，然后用这个子树完全替换调用元素。在删除带有时间处理程序或引用了其他对象子树时，就有可能导致内存占用问题。尽管DOM作为API已经非常完善了，但为了实现更多功能，仍然会有一些标准或专有的拓展。2008年之前，浏览器中几乎所有的拓展都是专有的，此后W3C着手将一些已经成为事实标准的专...

luck 2019-08-26 13:52 评论0 收藏0
Chrome 扩展开发——编写一个自己的浏览器插件

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

SunZhaopeng 2019-08-20 11:09 评论0 收藏0
实现一个简单的chrome插件

摘要：小结本文只是简单分享了如何开发一个简单的谷歌浏览器插件，以及一些注意事项，并且提到了如何授权和使用谷歌插件，重点介绍了插件开发必备的入口文件和插件中几个重要环境以及环境之间的通信。我们在上网的时候，都会用到浏览器，但是浏览器并非拥有我们想要的所有功能，我们可以根据自己的需要，实现自己的插件来满足需求。比如网页中经常会有大量的广告，如果你希望拥有一个纯净的网页，可以实现一个插件来删除网...

rubyshen 2019-08-23 13:58 评论0 收藏0