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：无法读取未定义属性'告别'

谢谢！

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 个答案: