![](/img/trans.png)
[英]Chrome extension messaging between popup.html and 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.