Chrome插件开发简单demo记录

最近需要开发一个谷歌浏览器插件，功能要求是获取用户当前浏览页面的部分数据，转移到另一个页面中显示。

首先新建一个名为Grabbing_data的文件夹，文件夹内容截图如下

js文件夹下显示

1、首先看mainfest.json的文件，内容如下：

{

    "name": "GrabbingData",   // 扩展的名称
    "manifest_version": 2,   //只能为2
    "version": "1.0.0",   //扩展的版本
    "description": "抓取数据",   //扩展的描述
    "browser_action": {   //制定扩展的图标放在Chrome的工具栏中
        "default_icon": "icon.png" , // 图标文件的位置
        "default_title": "抓取数据", //当鼠标悬停于扩展图标上所显示的文字
        "default_popup": "popup.html" // 用户单击扩展图标时所显示页面的文件位置
    }, 

    "content_scripts": [  //需要直接注入页面的JS，content-scripts和原始页面共享DOM，但是不共享JS
        {
          "matches": [""], //表示匹配所有地址。抓取特定网页的数据，只需要写该网站即可
          "js": ["js/jquery-3.2.1.js","/js/contentscript.js"], //多个JS按顺序注入
          "run_at":"document_start", // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后    一 个表示页面空闲时，默认document_idle

          "all_frames":true //定义的脚本是否会注入到嵌入式框架中
        }
    ]
}

2、插件popup.html页面

   
    
   
     
   


    开始抓取


 

3、插件页面需引入的js文件，popup.js

$(function () {
    
    $("#grab").click(function () {
        //发送抓取数据的指令
        chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
            chrome.tabs.sendMessage(tabs[0].id, { action: "grab" }, function (response) {
                //方案1、将从页面获取到的数据传到backgroud.js
                //var win = chrome.extension.getBackgroundPage();
                //win.data=response;
                
                var responseData= JSON.stringify(response);
                
                //方案2、直接传到后台，写入redis缓存
                $.ajax({
                    type: "post",//方法类型
                    url: "http://127.0.0.1:8080/TestController/saveData" , // 存储数据的接口
                    data: {'responseData':responseData},
                    dataType: 'json',
                    async:false,
                    success: function (result) {
                    },
                    error : function() {
                        alert("save data to redis error!");
                    }
                });
                
                //写入数据成功后，打开自己的网页，并在页面中用js获取刚刚写入后台的数据，直接显示在页面上
                //window.open('自己项目的页面地址',"_blank");
            });  
        }); 
    });

});

 

4、注入页面的contentscript.js 

//监听浏览器插件界面传来的获取数据指令
chrome.extension.onMessage.addListener(
    function (request, sender, sendResponse) {
        if (request.action === "grab") {

            //在页面dom中获取自己想要的数据。反馈给popup.js
            var companyName = $("#companyName").val(); //公司名称 
            if (sendResponse) sendResponse(companyName );
        } 
    }
);