chrome 插件开发心得

最近一个多月都在开发chrome的插件, 从无到有, 算是了解部分了!
说下chrome开发前需要具备的基本东西吧:

  1. H5的前端基础, js一定要会, 这个是必须的, 不说精通熟练, 但是至少要掌握.
  2. 基本的英文阅读能力, 因为很多东西要官方文档, 虽然360有翻译了官方文档, 但是是2013的了, 可以对照起来看!
  3. 有足够的耐心.

在做插件时 我的H5是属于基本不会的! 也是查阅大量的资料, 边做边学,才终于将公司要的插件开发出来!

说下插件开发吧

怎么才知道我需要什么文件
background.js, content_script.js, popup.js文件的创建是根据实际情况的

  1. 需要和网页交互的, 比如要获取或者更改当前DOM里面的元素,就需要创建content_script.js
  2. 需要在插件里面显示内容, 需要创建popup.HTML和popup.js两个文件,
  3. 需要做数据的保存的话可以创建background.js

在这之前 先要在manifest.json里面获取权限

"permissions" : [
        "alarms",
        "tabs",
        "https://*/*",
        "*://*/*",
        "http://*/*"

    ],

"content_scripts":[{
        "matches":[
            "https://*/*",
            "*://*/*",
        ],
        "js":["lib/jquery-2.0.0.min.js", "content_script.js"],
        "run_at": "document_end"
    }]

background.js, content_script.js, popup.js文件之间的通讯, 这里只是做讲了发送一次消息的. 发送多次消息,也就是长连接和这个区别不大, 只是改了部分等下,这个百度是可以搜索到的,我就不说了

content_script.js可以做的事情

1. content_script.js向background.js发送消息

// 这里要先获取在那个标签页面
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
           // 这里也可以知道当前标签页的URL      tabs[0].url
           
           chrome.tabs.sendMessage(tabs[0].id, { message: "begin"}, function (response) {

                });
            
});;

2. content_script.js向popup.js发送消息

// 这里使用的是extension
chrome.extension.sendMessage({msg: "message"},function (response) {
          // response 是background 收到消息后的返回数据
            if (response !== undefined) {
            }
 });

3. content_script.js接收来自popup和background的消息

chrome.runtime.onMessage.addListener(function(request, sender, sendRequest) {
  // request 你收到的内容,
  // sender 可以获取到你的tab的url
  // sendRequest 收到消息后回调发送消息的人   也就是上面response得到东西
});

background.js可以做的事情

1. background向content_script.js发送消息

// 这里使用的是runtime
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
           
           chrome.tabs.sendMessage(tabs[0].id, { message: "begin"}, function (response) {

                });
            
});;

2. background 向popup.js发送消息

// 在background里面定义变量data
var data = "我是数据"
// 在popup.js里面  
// popup.js是可以直接获取到background里面的数据
var data = chrome.extension.getBackgroundPage().data;
console.log(data);

3. background接收来自popup和content_script.js的消息

chrome.runtime.onMessage.addListener(function(request, sender, sendRequest) {
  // request 你收到的内容,
  // sender 可以获取到你的tab的url
  // sendRequest 收到消息后回调发送消息的人   也就是上面response得到东西
});

popup.js可以做的事情

1. popup.js向content_script.js发送消息

// 这里要先获取在那个标签页面
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
           // 这里也可以知道当前标签页的URL      tabs[0].url
           
           chrome.tabs.sendMessage(tabs[0].id, { message: "begin"}, function (response) {

                });
            
});;

2. popup.js 向background发送消息

chrome.extension.sendMessage({msg: "message"},function (response) {
          // response 是background 收到消息后的返回数据
            if (response !== undefined) {
            }
 });

3. popup接收来自content_script.js的消息

 //使用extension
chrome.extension.onMessage.addListener(function(request, sender, sendRequest) {
  // request 你收到的内容,
  // sender 可以获取到你的tab的url
  // sendRequest 收到消息后回调发送消息的人   也就是上面response得到东西
});

更新当前页面的url

chrome.tabs.query({currentWindow: true, active: true}, function (tabs) {
        chrome.tabs.update(tabs[0].id, {url: "https: www.baidu.com"});
    });

以上内容基本可以解决插件开发的基本问题了, 其他的api 可以进入Google的开发者网站查询!

推荐阅读更多精彩内容

  • chrome扩展开发入门教程 最近在开发chrome插件,看到一篇非常适合入门的教程,特记录一下 注:转载 本文首...
    谢大见阅读 3,488评论 3 21
  • Chrome扩展开发 标签(空格分隔): Chrome扩展 1、写在前面 Chrome插件是一个用Web技术开发...
    记忆的时间差阅读 3,218评论 1 13
  • 架构 总括:Manifest:程序清单Background:插件运行环境/主程序Pop up:弹出页面Conten...
    程序员小逗逼阅读 7,032评论 2 15
  • 点击查看原文 Web SDK 开发手册 SDK 概述 网易云信 SDK 为 Web 应用提供一个完善的 IM 系统...
    layjoy阅读 5,933评论 0 13
  • 01、什么是棒子? 日本当年侵略时,先占领了韩国(当年叫朝鲜)。在韩国犯下诸多恶行。后来占领东三省,为了奴役大量中...
    陈小样a阅读 24评论 0 0