Question

我正在尝试从使用chrome扩展程序打开的标签中获取数据。到目前为止，我的扩展程序可以打开一个带有正确链接的新选项卡，但是我无法获取content.js以响应单击弹出窗口中的提交按钮。我的整个代码如下。我真的很感激任何帮助。

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)
        })
})
})

这是我的内容-js，它没有记录＆＃39;弹出消息＆＃39;

    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"
    ]

}

Answer 1

使用Chrome浏览器的存储空间，我想出了如何在标签之间传输数据。 Content.js在新打开的烂番茄选项卡上搜索评级，使用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()
    //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扩展中进行通信

1 个答案: