popup.js怎么和content.js通信?[JQuery]

时间:2020-08-02 ┊ 阅读:369 次 ┊ 标签: 编程 , 设计 , JS

jquery.png
这两天为了实现一个谷歌浏览器插件功能,研究了半天怎么让插件来改特定网页里的特定字段的值,而这个值又来自popup的网页预先设定,下一步实现动态加载,可以让更多组实现便利。

目的很简单,我们有一个list,需要填到网页的某个字段,当然是好几个,这些值是设定好的,网页系统我们没法改,input想改成select list就不行。我就在想能不能用谷歌插件实现,这一研究还真实现了。
demo.png
在插件的list里选一个,然后触发select list的change事件,把选中的值传到网页上搜索字段。这只是demo,因为popup没有权限直接操作网页,popup生命很短,弹出来后,鼠标离开就消失了,所以需要通过popup和content来通信。

代码如下:

首先配置插件:
{
    "manifest_version":2,
    "name": "RRAssistant",
    "version": "1.0",
    "description": "Related Records Assistant,help to fill related records easily. this is hard coded some input fields in webpage.",
    "icons":{
        "16": "icon.png"
    },
    "browser_action":{
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "content_scripts":[{
        "all_frames": true,
        "css":["css/popup.css"],
        "js":["js/jquery-3.5.1.min.js", "js/content.js"],
        "matches":["https://www.amkevin.com/*"]
    }],
    "permissions": ["tabs","https://www.amkevin.com/*", "storage"]
}

然后popup网页:
<!DOCTYPE html>
<html>
    <head>
        <title>Related Records Assistant</title>
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/popup.js"></script>
        <link rel="stylesheet" type="text/css" href="css/popup.css">
    </head>
    <body>
        <div class="kg_main">
            <h2>Related Records Assistant</h2>
            <h3 id="youselect">you selected:</h3>
            <select class="kg_rr1" id="kg_rr1">
                <option value="1" role="option">Report Request</option>
                <option value="2" role="option">Batch Support</option>
                <option value="2" role="option" selected="selected">Data Bulk Update</option>
            </select>
        </div>
    </body>
</html>

简单的css样式:
.kg_main{
    font-size: 12px;
    width: 250px;
    position: relative;
    background: white;
}
h2{
    color: blueviole;
    text-align: center;
}

h3{
    font-size: 12px;
    text-align: center;
}

.kg_main{
    width: 242px;
    margin: 3px;
}

.kg_rr1{
    width: 100%;
    word-wrap: none;
    overflow: hidden;
    margin-bottom: 10px;
}

jQuery简化代码来发送消息到content:
$(function(){
    var rr1 = $('#kg_rr1').find('option:selected').text();
    $('#kg_rr1').change(function(){
        $('#youselect').text('you selected:' + $('#kg_rr1').find('option:selected').text());
        rr1=$(this).find('option:selected').text();
        chrome.tabs.query({active:true, currentWindow:true}, function(tabs){
            chrome.tabs.sendMessage(tabs[0].id, {todo: "setRR1", "newRR1": rr1})
        });
    });
});

content接收消息并设置到网页搜索框里:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
    if(request.todo == "setRR1"){
        var newRR1 = request.newRR1;
        $('#s_t').val(newRR1);
    }
});

好多想起来很简单,实现起来确实不容易。好在功能实现。经过一段美化完事了。

文章评论

添加新评论

温馨提醒:如果您是第一次在本站留言,需要审核后才能显示哦!

相关文章

如何绕过登录抓取js动态加载网页数据[Python]

如何绕过登录抓取js动态加载网页数据[Python]

今天经历了一翻折腾,把一个需要登录网站并js动态加载的数据一一给抓下来了。 首先,登录时有cookie,我们需要把cookie保存下来,用urllib2构建request时加入header信息,这时还多了一点,虚构了浏览器信息,让服务器以为是正常的浏览器发起的请求,这样可以绕过简单的反爬虫策略...
阅读全文>>
终于用上了专业版的PyCharm含激活方法链接[Python]

终于用上了专业版的PyCharm含激活方法链接[Python]

就直接上图片吧: 激活方法链接:https://www.cnblogs.com/pupilheart/p/9734124.html
阅读全文>>
如何使SyntaxHighlighter长代码自动换行[js/css]

如何使SyntaxHighlighter长代码自动换行[js/css]

用SyntaxHighlighter高亮代码,最近发现下面有个滚动条不好看, 代码太长造成的,去掉滚动条让长代码能自动换行,就好了。 打开样式表shCoreDefault.css 22行,把white-space: pre !important;改为white-space: pre-wrap ...
阅读全文>>
简易中英小词典iDict v1.0发布[Github开源]

简易中英小词典iDict v1.0发布[Github开源]

用wpf写了一个小词典,方便自己使用。 功能: 简易查词 最小化系统托盘 设置开机启动 本站下载 Github下载 Github 源码 词典是用python爬的iciba词库,基本够用了。 下面是python抓取词典源码,现学现用。python上手就是简单。 # -*- codin...
阅读全文>>
为AS/400命令创建帮助页面[GENCMDDOC]

为AS/400命令创建帮助页面[GENCMDDOC]

用到命令: Generate Command Documentation (GENCMDDOC) command. GENCMDDOC CMD(MYLIB/mycmd) TODIR('/qsys.lib/mylib.lib/qpnlsrc.file') ...
阅读全文>>