Chrome擴展程序和內容腳本只能以“檢查彈出窗口”模式進行通信

Question

我有這個相當簡單的擴展和內容腳本：

manifest.json的：

{
  "name": "My.First.App.Uses.Native.Api",
  "version": "1.0",
  "manifest_version": 2,
  "description": "My app uses my first Native Api",
  "icons": {
    "128": "icon-128__2.png"
  },
  "permissions": [
    "nativeMessaging", "activeTab"
  ],
  "browser_action": {"default_popup": "ext-page.htm"},
  "content_scripts": [
    {
      "matches": ["file:///*"],
      "js": ["content-script.js"]
    }
  ]
}

EXT-的script.js：

// Listen for messages that come from the client script.
chrome.runtime.onMessage.addListener(
  function( request, sender, sendResponse ) {
    if( request.greeting ) {
        //connectToNative();
        sendResponse( { farewell: request.greeting + ' -> received' } );
    }
  } );

內容的script.js：

var btn = document.getElementById( 'mybutton' );
if( btn ) {
    btn.addEventListener( 'click', function() {
        var msg = document.getElementById( 'mytext' ).value;
        if( msg ) {
            chrome.runtime.sendMessage( { greeting: msg }, function( response ) {
                console.log( response.farewell );
            } );
            //port.postMessage({joke: "Knock knock"});
        }
        else {
            alert( "content script could not send message" );
        }
    } );
}

EXT-page.htm：

<!DOCTYPE html>
<html>
<head>
    <script src='./ext-script.js'></script>
</head>
<body>
    This is a test Extention.
</body>
</html>

注入內容腳本的示例頁面：

<html>
<head>
    <title>Connecting to a Chrome Extention using Content Script</title>
</head>

<body>
    <p>
        <!--<input id="btn" type="button" value="open document" />-->
        <input id="mytext" type="text" />
        <input id="mybutton" name="mybutton" type="button" value="open document" />
    </p>
</body>
</html>

我的問題：如果我選擇擴展並“檢查彈出”它（意味着啟動調試模式），然后單擊我的示例頁面上的mybutton按鈕，然后我從擴展中收到一條消息，我可以在我的頁面控制台中看到它。 我想要的是在我的示例頁面中單擊該按鈕后立即獲取該消息 - 當然不需要調試擴展。 如果我沒有“檢查彈出”擴展名，那么我收到此錯誤消息：

（未知）事件處理程序出錯：TypeError：無法讀取undefined屬性'告別'

謝謝！

Answer 1

我想因為你在彈出窗口內的main.js中執行警報，彈出窗口需要打開。 嘗試在background.js中插入警報。 因為background.js作為content_script插入到您的示例頁面中，所以警報應該顯示在您的示例頁面中。

而不是在background.js

    if( msg ) {
        chrome.extension.sendRequest( msg );
    }

做

var msg = document.getElementById( 'mytext' ).value;
    if( msg ) {
        alert( msg );
    }

文檔建議有這樣的清單：

{
    "manifest_version": 2,
    "name": "Test",
    "version": "0.1",
    "background": {
    "scripts": ["background.js"],
    //this script is the main one which your extension communicates with
    "persistent": false
},
"browser_action": {
    "default_title": "BET",
    "default_popup": "popup.html"
    //this html file is the one that will be shown when clicked on your extension icon
},
"content_scripts": [{
    //this file will get injected into the tabs
    "matches": ["file:///*"],
    "js": ["content.js"]
}],
"permissions": [
    "tabs",
    "<all_urls>"
]

}

所以在你的content.js中你應該有

chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
    console.log(response.farewell);
});

在background.js里面你會收到消息

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    console.log(request.greeting);
    if (request.greeting == "hello")
        sendResponse({farewell: "goodbye"});
});

這樣做，您將能夠將從注入的腳本發送的內容記錄到您的擴展中...只需從擴展頁面打開后台控制台即可。

希望如果你稍微改變結構，這將有所幫助。 如果有幫助，請告訴我

Chrome擴展程序和內容腳本只能以“檢查彈出窗口”模式進行通信

問題描述

1 個解決方案

解決方案1
0 2015-06-17 11:59:52

Chrome擴展程序和內容腳本只能以“檢查彈出窗口”模式進行通信

問題描述

1 個解決方案

解決方案1 0 2015-06-17 11:59:52

解決方案1
0 2015-06-17 11:59:52