0

我有一个 chrome 扩展，chrome 扩展的用例是这样的：

第1部分

  1. chrome 扩展有一个弹出页面，其中包含 2 个 div 元素和一个按钮
  2. 一旦我单击弹出窗口，获取当前选项卡的 URL 使用 chrome.runtime.sendMessage API 将其发送到后台脚本
  3. 后台脚本有一个消息监听器使用 cookie 执行 xhr 请求，获取与 url 相关的数据，然后将其发送回 popup.js
  4. popup.js 根据接收到的数据编辑 2 个 div 元素

这部分工作得很好，但是第二部分变得有点棘手：

第2部分：

  1. 如果我们单击弹出窗口中的按钮，使用在第 1 部分中获得的一些数据，必须进行一些时间转换
  2. 在此时间转换之后，我需要与页面的 DOM 交互并为此编辑一些元素，我需要将时间转换的结果发送到内容脚本
  3. 为了实现第 2 点，作为测试的一部分，我使用 chrome.tabs.sendMessage API 将数据专门发送到选项卡的内容脚本并期望它取回，但我在 popup.js 中收到以下错误

未选中 runtime.lastError: 无法建立连接。接收端不存在。

请在下面找到我的清单、背景、时区和 popup.js（我的内容脚本）代码：

清单.json

{
    "manifest_version": 2,
    "name" : "Switcher",
    "version": "1.1",
    "browser_action":{
        "default_popup":"popup.html"
    },
    "permissions":["tabs","activeTab","cookies","<all_urls>"],
    "background": {
            "scripts": ["background.js"],
            "persistent": false
        }
    
}

Popup.js

document.addEventListener("DOMContentLoaded", function(event){
   var obj = {"active": true, "currentWindow": true}
    chrome.tabs.query(obj, function(tab){
        chrome.runtime.sendMessage({url: tab[0].url, action: "id_load"},function(response) //Send message to background script with the URL of the tab
        {
              //Manipulate the popup divs using the response from background script

         })

    })

    var timezone = document.getElementById("change_timezone")
    timezone.addEventListener('click',change_timezone_function)
    function change_timezone_function()
    { 
        var query_info = {active: true, currentWindow: true}
        chrome.tabs.query(query_info, function(tab){
            console.log(tab[0].id)
        chrome.tabs.sendMessage(tab[0].id,{time: ticket_time},function(response) //Send message to the content script by getting the tab ID
           {
                console.log(response)
            })
        })
         
    }    
})

背景.js

 chrome.runtime.onMessage.addListener(
         function(request,sender,sendResponse)
        {
         //Do some manipulation, few api calls and send response asynchronously after the api call is successful
          return true
     })

时区.js

chrome.runtime.onMessage.addListener(function(request,sender,sendResponse){
    var date_time = new Date(request.time.toString())
    console.log(request.time)
    sendResponse({date_time: request.time})
})

所有的答案都指向 popup.js 可以使用选项卡特定消息与内容脚本交互的事实，但这似乎不起作用，我认为这可能是因为后台侦听器，但从逻辑上讲，没有理由相信所以，因为我的弹出消息是专门发送到选项卡的内容脚本的。

4

0 回答 0