popup和content.js不在Chrome扩展中通信 [英] popup and content.js not communicating in chrome extension

问题描述

我试图从使用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 =http://www.rottentomatoes.com/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 =http://www.rottentomatoes.com/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 = "http://www.rottentomatoes.com/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 = "http://www.rottentomatoes.com/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扩展中通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！