google浏览器扩展开发随笔一

前言:由于平时开发项目时,经常遇到一些问题,在查找答案的过程中踩了很多坑,于是记下笔记,记录在开发过程中的解决方案,以备以后查阅。

调试命令:cnpm run watch:dev

打开扩展程序,点击背景页,就会出现background.js在实际运行调试场景。

PS:国内电商有个要求,就是可以实时采集商品内容,并将商品内容同步到自己需要发布平台的。

不同的平台商品,它的布局是不样的。目前使用最多的是goquery来做元素处理。于是,针对不同网页的地址采集时,带上采集的url,通过url来判断对应的元素取值选择。

在popup可能与content通信,可以点击时开始采集,不过由于当前项目刚起步,所以使用右键来直接转存内容。

在background.js写入以下代码

import axios from "@/js/axios";

chrome.contextMenus.create({
    title: "转存内容",
    onclick:function () {
        chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
            chrome.tabs.sendMessage(tabs[0].id, { action: "copy" }, function (response) {
                console.log(tabs)
                axios.post("http://127.0.0.1:8082/html/fit",{html:response}).then((response)=>{
                    console.log(response);
                }).catch((error)=>{
                    console.log(error)
                });
            });
        });
    }
});

  意思很简单,就是将文档内容传到服务器,让服务器使用goquery进行元素处理,完毕。

猜你喜欢

转载自www.cnblogs.com/bfyang5130/p/12803311.html
今日推荐