google-chrome-extension - Chrome 扩展 - 从 DOM 到 Popup.js 消息传递

标签 google-chrome-extension sendmessage

我正在尝试让一个简单的 Google Chrome 扩展程序工作,其中消息/变量流经以下每个步骤......

  • DOM 内容(来自特定的 HTML 标签)
  • Contentscript.js
  • Background.js
  • Popup.js
  • Popup.html

  • 我已经想出了如何将消息/变量发送到 Background.js 并从它向一个方向( Background.js -> Popup.jsBackground.js -> Contentscript.js )发送消息/变量,但无法成功通过所有三个( Contentscript.js -> Background.js -> Popup.js )。这是我的演示中的文件。

    DOM
    <h1 class="name">Joe Blow</h1>
    Content.js
    fromDOM = $('h1.name').text();
    
    chrome.runtime.sendMessage({contentscript: "from: contentscript.js", title: fromDOM}, function(b) {
        console.log('on: contentscript.js === ' + b.background);
    });
    

    Background.js
    chrome.tabs.getSelected(null, function(tab) {
        chrome.extension.onMessage.addListener(function(msg, sender, sendResponse) {
    
            sendResponse({background: "from: background.js"});
            console.log('on: background.js === ' + msg.title);
    
        });
    });
    

    Popup.js
    chrome.extension.sendMessage({pop: "from: popup.js"}, function(b){
        console.log('on: popup.js === ' + b.background);
    
        $('.output').text(b.background);
    });
    

    Popup.html
    <html>
    <head>
      <script src="jquery.js"></script>
      <script src="popup.js"></script>
    </head>
    <body>
    
    <p class="output"></p>
    
    </body>
    </html>
    

    Manifest.json
    {   
    "name": "Hello World",   
    "version": "1.0",
    "manifest_version": 2,
    "description": "My first Chrome extension.",
    "background" : {
        "scripts": ["background.js"]
    },
    "permissions": [
        "tabs"
    ],
    "browser_action": {     
        "default_icon": "icon.png",
        "default_popup": "popup.html"   
    },
    "content_scripts": [
        {
          "matches": ["http://*/*"],
          "js": ["jquery.js","contentscript.js"],
          "run_at": "document_end"
        }
    ]
    
    }
    

    我有一种感觉,我知道故障是什么,但是 manifest_version: 2 的文档严重缺乏它很难破译。一个简单的、可重用的示例在学习过程中会非常有帮助,因为我确信这是一个常见问题。

    最佳答案

    好的,更改代码中的一些内容应该可以使其按您想要的方式工作。并非我将要进行的所有更改都是必需的,但这就是我可能会这样做的方式。

    内容脚本

    var fromDOM = $('h1.name').text();
    chrome.runtime.sendMessage({method:'setTitle',title:fromDOM});
    

    背景
    var title;
    chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
      if(message.method == 'setTitle')
        title = message.title;
      else if(message.method == 'getTitle')
        sendResponse(title);
    });
    

    Popup.js
    chrome.runtime.sendMessage({method:'getTitle'}, function(response){
      $('.output').text(response);
    });
    

    关于google-chrome-extension - Chrome 扩展 - 从 DOM 到 Popup.js 消息传递,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16322830/

    相关文章:

    javascript - 为什么我会收到 "' documentScan' is not allowed for specified platform"警告?

    javascript - Chrome 38 : networkPredictionEnabled not accessible

    google-chrome - 如何让通知显示在 Chrome 和 Chrome 操作系统上,例如 Pushbullet 和 Google Now?

    c# - 为什么PostMessage发送小写按键时会发送多个按键?

    c# - SendMessage 到 .NET 控制台应用程序

    javascript - Chrome 扩展程序编程 - 取消表单提交

    javascript - 替换使用 ajax 的页面上的内容

    ios - 将字典从 iOS 应用程序发送到 WatchKit - watchOS2

    android - 如何使用android Wear DataApi发送相同的数据两次?

    delphi - 如何在不显示模式对话框的情况下关闭应用程序?