簡體   English   中英

chrome擴展中的popup和content.js無法通信

[英]popup and content.js not communicating in chrome extension

我正在嘗試從使用chrome擴展名打開的標簽中獲取數據。 到目前為止,我的擴展程序可以使用正確的鏈接打開一個新標簽,但是我無法讓content.js響應以單擊彈出窗口中的Submit按鈕。 我的整個代碼如下。 我真的很感謝您的幫助。

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

這是我的content-js,沒有記錄“彈出消息”

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

}

通過使用chrome瀏覽器的存儲,我了解了如何在標簽之間傳輸數據。 Content.js在新打開的“爛番茄”選項卡上chrome.storage.local.set評分,使用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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM