制作谷歌插件 popup background content_scripts通信之间的问题

最新推荐文章于 2023-12-22 16:36:33 发布

Samazy

最新推荐文章于 2023-12-22 16:36:33 发布

阅读量1k

点赞数

文章标签： html jquery javascript google 插件

本文链接：https://blog.csdn.net/qq_38592780/article/details/107322787

版权

公司最近有需求
就是运营人员输入自己的账号和密码然后获取所属的店铺的账号和密码
自动登录亚马逊所以需要一个浏览器插件帮助运营人员

其实一开始我查资料了解了基础的东西
但是我实在分不清楚popup.html background.js 还有content_scripts之间的关系
特别是这个三个之间如何通信的。

谷歌插件api文档我是看了的但是奈何英文和众多的api挡住了我
完全摸不到头脑所以菜鸡的我只好翻阅各种大佬的资料
所幸在B站找到了大佬的视频教学下方放入大佬的视频

大佬的教学视频
（ps:有基本基础的可以直接跳到第5课）

2020/07/13

以下为原答案可以忽略可以往下滑

popup.html 这是弹窗页面你如果想输入一些指令，或者操作一些指令这就是必须的
background.js 这基本上是用来处理逻辑请求接口返回数据这是重中之重
content_scripts里面的js 这是用来获取浏览器你所在页面的一些东西dom元素啊等等

例如我所需要给公司完成的需求是这样的
popup.html弹窗页面现在需要一个提交一个表单然后来获得账号密码来自动填写浏览器上亚马逊页面的登陆表单。
逻辑是这样的：popup.html通过点击提交按钮来触犯点击事件并告诉background.js 我已经点击了
在这里插入图片描述
background.js 通过监听事件表示我已经搜到了你提交的表单信息已经开始请求接口了并返回一个我已经成功接收到消息的提示给popup.html

然后content.js 等亚马逊登陆界面加载好同样也发生一个请求给background.js （其实这个不分顺序有可能是content.js先加载因为浏览器页面加载好你才好操作popup 这里只是为了方便叙述）表示我已经获得页面的数据了我需要数据填充
在这里插入图片描述
同样的background.js 通过监听事件表示已经知道浏览器页面的数据已经有了然后根据popup给的信息作为参数开始请求接口然后返回数据给content.js

最终content.js通过bg.js传递过来的数据填充亚马逊登陆表单。

以上，就是大概我所要做的需求思想，有时间我回来完事一下。

2020/07/22 更新

我原本以为看了视频我就能明白差不多了但是的确还是存在一些问题。
看视频让我明白了popup.js 怎么给bg.js通信
也明白了content_scripts向bg.js通信

但是其实我做的时候就遇到一个问题就是如果都向bg发送消息那么bg如何区分了？

所以我试了一下发现bg都能收到但是message会被之后那个覆盖回调函数也会重复执行
这并不是我想要的我需要的是接受到pop和content的数据然后在bg里进行处理
处理完结果返回给content 所以我重新想了一个思路
就是pop传递数据给bg，然后通过bg传给content 最后content在进行最后的处理
下面贴上我的处理结果

//pop.js
$(function(){
    var needObj = {
        ips: [],
        key: '',
        user: ''
    };
    $.ajax({
        async: false,
        type: "GET",
        url: "http://127.0.0.0:0000/", 
        success: function (data) {
            needObj.ips = data.in_ips;
        },
        error: function (data) {
            alert('获取ip出错');
        }
    });
    $("#save").click(function(){
        needObj.user = $("#input1").val();
        needObj.key = $("#input2").val();
        // 向bg发送数据
        chrome.runtime.sendMessage(needObj, function(response) {
            console.log(response);
        });
    })
})

// bg.js
chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
    let someInfo = message
    chrome.windows.getCurrent((currentWindow) => {
        chrome.tabs.query({ active: true, windowId: currentWindow.id }, (tabs) => {
            chrome.tabs.sendMessage(tabs.length ? tabs[0].id: null, someInfo, function(response) {
        		if(typeof response !='undefined'){
        			console.log(response);
        		}else{
        			console.log('报错了'+ response);
        		}
        	});
        })
    })
    sendResponse("个人账号邮箱发送成功了")
})

其实最麻烦的在于chrome.tabs.query 这个方法是bg向content发送数据而使用的方法
但是因为每个content都是一个浏览器页面 content会有很多所以它为了确定是你所需要content
所以需要一个tabid 就是当前浏览器标签ID content通过这个id来和bg确定
我一开始是这样写的

chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
    let someInfo = message
    chrome.tabs.query({ active: true, windowId: currentWindow.id }, (tabs) => {
        chrome.tabs.sendMessage(tabs.length ? tabs[0].id: null, someInfo, function(response) {
    		if(typeof response !='undefined'){
    			console.log(response);
    		}else{
    			console.log('报错了'+ response);
    		}
    	});
    })
    sendResponse("个人账号邮箱发送成功了")
})

但是因为bg.js是插件的背景页它一开始就会生成所以这时候的tab.id 是插件页本身那个tabid
所以到后面我监听来自pop消息成功后传给content 表示是当前亚马逊页面的tab.id不存在的
我找了很久都不知道为什么它不存在打印出来也只有这个插件刚刚生成的时候会出现一次tab.id
就在这里我卡了很久
直到后面看到RuphiLau大佬的文章
Chrome Extension 开发总结（三）：开发技巧、
才解决了这个问题还有很多很多大佬的文章我在文章底部一一贴上更感谢这些大佬的文章。

content.js
chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
    $.ajax({
        async: false,
        type: "POST",
        url: "https://www.baidu.com",
        data: JSON.stringify({"ips": message.ips,"key": message.key,"user": message.user}),
        success: function (data) {
            if(data.code == 200 ){
                // 逻辑处理
            }else{
                alert(data.msg);
            }
        },
        error: function (err) {
            console.log(err)
            alert("报错了,请联系IT部")
        }
    });