Google Chrome扩展程序在弹出窗口和选项卡之间进行对话

尼尔·齐扎纳

我希望将JS信息从弹出窗口传递到背景选项卡。
这可能吗?

我尝试了几件事,但没有任何效果。

我的清单:

{
  "name": "Test",
  "description": "Make the current page red",
  "version": "2.0",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "persistent": false
  },
  "browser_action": {
    "default_title": "Make this page red",
    "default_popup": "popup.html",
  },
  "manifest_version": 2
  ,
    "content_scripts": [ {
    "js": [ "jquery.min.js" ],
    "matches": [ "http://*/*", "https://*/*"]
  }]
}

我的弹出窗口:

<head>
    <title>Options for Color Chooser</title>
    <script type="text/javascript" src="popup.js"></script>
</head>
<body style="width:300px; height:250px; text-align:center;">
    <input id="gobtn" type="button" value="Start"  />
</body>
</html>

而我的JS:

function() {

var btncolor = "red";

chrome.extension.onRequest.addListener(function() {
    $("body").css("background",btncolor);
    alert("!");
});

}

任何帮助将不胜感激

德里里

您需要在中创建一个request函数popup.js,然后在主JS文件中侦听它。试试这个:

popup.js

var btn = document.getElementById('gobtn');
btn.addEventListener('click', setPageColor);

function setPageColor( newColor ) {

    newColor = newColor || 'red';

    // This is the syntax for "talking" to our current tab
    chrome.tabs.getSelected(null, function(tab) {
        chrome.tabs.sendRequest(tab.id, {action: "setColor", color: newColor}, function(response) {

            // You can do whatever you want with the response :)
            if (response.msg === 'SUCCESS') console.log('It worked!')
            if (response.msg === 'FAIL') console.error('Fail -_-')

        });
    });
}

main.js

...

// This is the "receiving end", which has full DOM/window access on the tab
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    // request.action provides a nice pattern for re-using this listener
    if (request.action == "setColor") {
        color = request.color;
        document.body.setAttribute('style', 'color:' + color)
        sendResponse({ msg: 'SUCCESS' });
    }
    else {
        sendResponse({ msg: 'FAIL' }); // Send nothing..
    }
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Google扩展程序如何将我的脚本注入活动选项卡并与弹出按钮链接?

在 Google Chrome 扩展程序中获取打开的弹出窗口

Google Chrome扩展程序:始终可见的弹出窗口

在Google Chrome浏览器扩展程序弹出窗口中发送异步消息

Google Chrome扩展程序:模态/弹出窗口关闭时发出警报

如何阅读在线资源并更新Google Chrome扩展程序中的弹出窗口

Chrome 扩展程序:如何通过单击 html 弹出窗口中的按钮在新选项卡中打开指定链接?

Google扩展程序窗口

创建的iframe与扩展程序,Google Chrome扩展程序之间的通信

如何在Google Chrome扩展程序中启动新窗口

是否可以将URL从Google Chrome(或其他浏览器)窗口中所有打开的选项卡复制到电子邮件中?

为Google Apps组织设置Chrome扩展程序选项

通过Google Chrome扩展程序进行文件监控和上传

Chrome扩展程序:在当前选项卡上进行事件监听

带有选项卡的网页在IE中不会显示,但在Google Chrome中会显示

WordPress Favicon没有显示在Google Chrome选项卡上

如何下载在选项卡中检索到的所有URL(Google Chrome)

Google Chrome打包的应用弹出窗口?

更新Google Chrome扩展程序

Google Chrome扩展程序错误

在 console.cloud.google.com 中找不到已安装的应用程序选项卡

Chrome扩展程序-executeScript不在活动选项卡中

Chrome扩展程序:获取活动选项卡的源代码

Chrome扩展程序:Javascript注入到活动选项卡

angularjs和google chrome扩展

Chrome扩展程序弹出窗口和选项页面的默认样式表在哪里?

带有Google Chrome扩展程序安装检查的jQuery自动弹出

关闭Google扩展程序“弹出”后,请继续进行处理

带有引导选项卡的Google图表

TOP 榜单

热门标签

归档