本文介绍了popup和content.js不在Chrome扩展中通信的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图从使用Chrome扩展打开的选项卡中获取数据。到目前为止，我的扩展程序可以打开一个带有正确链接的新选项卡，但是我无法让content.js响应以在弹出窗口中单击提交按钮。我的整个代码如下。我真的很感激任何帮助。
popup.js
$（document）.ready（function （）{ function d（c）{ console.log（c）} $（'＃rt'）。click（function（）{ var mov = $（'input：text'）。val（） //打开带有电影标题名称的新链接 var movUpdate = mov.replace（/ / g，'_'） var link =www.rottentomatoes/m/+ movUpdate chrome.tabs.create（{url：link，selected：false}，function（tab）{ chrome.tabs.sendMessage（tab.id，{message：clicked_submit}） d（tab.id）}）}）这是我的内容-js，它没有记录'弹出消息' p>
函数d（c）{ console.log（c）} chrome.runtime .onMessage.addListener（函数（request，sender，sendResponse）{ if（request.message ==='clicked_submit'）{ //找到rottentoma分数 d（'弹出消息'）} }）;popup.html
<！DOCTYPE html> < script src =jquery-3.1.1.min.js>< / script> < script src =popup.js>< / script> 搜索RT for Movie：< input type =textvalue =>< input type =submitid =rt> < / div>manifest.json
{manifest_version：2，name：extension，version：0.1，content_scripts：[ {匹配：[< all_urls> ]，js：[content.js] }]，browser_action：{default_icon：icon.png ，default_popup：popup.html} ，background：{scripts：[background.js] $，permissions：[标签] }解决方案
使用chrome浏览器的存储，我想出了如何在选项卡之间传输数据。 Content.js在新打开的Rotten Tomatoes选项卡上对评分进行刮擦，并使用 chrome.storage.local.set 存储它们以供popup.js访问并显示在活动选项卡上。
popup.js
$（document）.ready（function （）{ function d（c）{ console.log（c）} $（'＃rt'）。click（function（）{ var mov = $（'input：text'）。val（） //打开带有电影标题名称的新链接 var movUpdate = mov.replace（/ / g，'_'） var link =www.rottentomatoes/m/+ movUpdate chrome.tabs.create（{url：link，active：false}） $ b chrome.storage.onChanged.addListener（function（changes，areaName）{//更新收视率 //根据您的变化做任何事情 console.log（'changed！'） chrome.storage.local.get（keyName，function（items）{ console.log（items） console.log（items。 keyName） var critsscore = items.keyName [0] var audiencescore = items.keyName [1] $（'＃critsscore'）。html（'Critics'+ criticsscore） $（'＃audiencescore'）。html（'Audience'+ audiencescore） $（'＃title'）。html（items.keyName [2]） //用items.keyName做某事}）; }）; chrome.storage.local.get（keyName，function（items）{//初始化应用程序 console.log（items） console.log（items。 keyName） var critics = items.keyName [0] var people = items.keyName [1] $（'＃critsscore'）。html（'Critics'+ critics） $（'＃audiencescore'）。html（'Audience'+ people） $（'＃title'）。html（items.keyName [2]） // Do items.keyName }）; }）content.js
var ratings = document.getElementsByClassName（meter-value） var critics = ratings [0] .innerText var audienceIndex = ratings.length - 1 var audience = ratings [audienceIndex] .innerText var title = document.getElementById（movie-title）。innerText chrome.storage.local.set（{keyName：[评论家，观众，标题]}，function（）{console.log（'mah critics stored'）}）;popup.html
<！DOCTYPE html> < script src =jquery-3.1.1.min.js>< / script> < script src =popup.js>< / script> < style> body { background-color：red; 颜色：白色; } input { margin：2px; } < / style> 搜索RT for Movie：< input type =textvalue =>< input type =submitid =rt> < h1 id =title>< / h1> < h3 id =critsscore>< / h3> < h3 id =audiencescore>< / h3> < / div>
I am trying to get data from a tab opened with chrome extension. So far my extension can open a new tab with the correct link, but I'm having trouble getting content.js to respond to click on the submit button in my popup window. My entire code is below. I would really appreciate any help.
popup.js
$(document).ready(function(){ function d(c){ console.log(c) } $('#rt').click(function(){ var mov = $('input:text').val() //open new link with movie title name var movUpdate = mov.replace(/ /g,'_') var link = "www.rottentomatoes/m/" + movUpdate chrome.tabs.create({"url":link,"selected":false},function(tab){ chrome.tabs.sendMessage(tab.id,{"message":"clicked_submit"}) d(tab.id) }) }) })This is my content-js, it is not logging 'popup message'
function d(c){ console.log(c) } chrome.runtime.onMessage.addListener( function(request,sender,sendResponse){ if(request.message==='clicked_submit'){ //find the rottentomato scores d('popup message') } });popup.html
<!DOCTYPE html> <script src="jquery-3.1.1.min.js"></script> <script src="popup.js"></script> Search RT for Movie: <input type="text" value=""><input type="submit" id="rt"> </div>manifest.json
{ "manifest_version":2, "name":"extension", "version":"0.1", "content_scripts":[ { "matches": [ "<all_urls>" ], "js":["content.js"] }], "browser_action":{ "default_icon":"icon.png", "default_popup":"popup.html" } , "background":{ "scripts":["background.js"] }, "permissions":[ "tabs" ] }解决方案
Using chrome browser's storage, I figured out how to transfer data between tabs. Content.js scrapes for ratings on the newly opened Rotten Tomatoes tab, stores them using chrome.storage.local.set for popup.js to access and display on the active tab.
popup.js
$(document).ready(function(){ function d(c){ console.log(c) } $('#rt').click(function(){ var mov = $('input:text').val() //open new link with movie title name var movUpdate = mov.replace(/ /g,'_') var link = "www.rottentomatoes/m/" + movUpdate chrome.tabs.create({"url":link,"active":false}) }) chrome.storage.onChanged.addListener(function(changes, areaName) { //updates the ratings // Do whatever you want with the changes. console.log('changed!') chrome.storage.local.get("keyName",function(items) { console.log(items) console.log(items.keyName) var criticsscore = items.keyName[0] var audiencescore = items.keyName[1] $('#criticsscore').html('Critics ' + criticsscore) $('#audiencescore').html('Audience ' + audiencescore) $('#title').html(items.keyName[2]) // Do something with items.keyName }); }); chrome.storage.local.get("keyName",function(items) {//initialize the application console.log(items) console.log(items.keyName) var critics = items.keyName[0] var people = items.keyName[1] $('#criticsscore').html('Critics ' + critics) $('#audiencescore').html('Audience ' + people) $('#title').html(items.keyName[2]) // Do something with items.keyName }); })content.js
var ratings = document.getElementsByClassName("meter-value") var critics = ratings[0].innerText var audienceIndex = ratings.length - 1 var audience = ratings[audienceIndex].innerText var title = document.getElementById("movie-title").innerText chrome.storage.local.set({"keyName": [critics,audience,title]},function(){console.log('mah critics stored')});popup.html
<!DOCTYPE html> <script src="jquery-3.1.1.min.js"></script> <script src="popup.js"></script> <style> body{ background-color: red; color:white; } input { margin: 2px; } </style> Search RT for Movie: <input type="text" value=""><input type="submit" id="rt"> <h1 id="title"></h1> <h3 id="criticsscore"></h3> <h3 id="audiencescore"></h3> </div>
更多推荐
popup和content.js不在Chrome扩展中通信
发布评论