Question

在background.js中：

function checkForValidUrl(tabId, changeInfo, tab) {
    if(changeInfo.status === "loading") {
    if (tab.url.indexOf('google.com') > -1 || tab.url.indexOf('amazon.com') > -1) {
     chrome.pageAction.show(tabId);
}
}
};
chrome.tabs.onUpdated.addListener(checkForValidUrl);
chrome.pageAction.onClicked.addListener(function(tab){

if (tab.url.indexOf('google.com') > -1){

    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(tab.id, {google_go: "go"});
    });

    chrome.tabs.create({url: "http://facebook.com", "active":true});
    chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) {
        chrome.runtime.onConnect.addListener(function(port) {
            console.assert(port.name == "facebook_chanel");
            port.onMessage.addListener(function(msg) {
              if (msg.facebook_go == "go")
                port.postMessage(request);
            });
          });
        });
}

在facebook.js中：

$(document).ready(function(){
    var port = chrome.runtime.connect({name: "facebook_chanel"});
    port.postMessage({facebook_go: "go"});
    port.onMessage.addListener(function(msg) {

        console.log(msg);

    });

});

我太google了。按 pageAction ，我看到带有Facebook的标签，在控制台中看到一个对象。在html/background.html控制台（Chrome）中，我在

中看到了错误Assertion failed:

console.assert(port.name == "facebook_chanel");

我再次去谷歌，按 pageAction ，我在新的facebook页面看到一个旧的和2个新的对象。

如何解决？感谢。

更新

background.js

中的

chrome.tabs.create({url: "http://facebook.com", "active":true}, function(tab){
        chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) {
                chrome.tabs.query({active: true, currentWindow: true}, function(tab) {
                  chrome.tabs.sendMessage(tab[0].id, request);
                });

        });
    });

facebook.js ：

中的

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(request);
  });

正确的方法？但我有明确的控制台，什么错了？

Answer 1

目前还不是很清楚你想要实现什么以及为什么你选择使用porsistent端口（而不是单个消息传递）和页面动作，但是根据我的理解，上下文菜单可能更好/更清洁方法

因此，下面是一个示例扩展的源代码，它为选择某些文本时注册上下文菜单（即选择/突出显示某些文本并右键单击），然后打开Facebook选项卡并发送所选文本以进一步处理（通过FB选项卡的内容脚本）。

如果您仍需要页面操作而不是上下文菜单，请更改以下代码：

在后台页面中为chrome.pageAction.onClicked添加侦听器。
将一些代码注入原始标签（例如google.com）以检索广告返回当前选择（使用chrome.tabs.executeScript()）。
处理获取的所选文本，如下面的代码所示。

<强>的manifest.json：

{
    "manifest_version": 2,

    "name":    "Test Extension",
    "version": "0.0",
    "offline_enabled": false,

    "background": {
        "persistent": false,
        "scripts": [
            "background.js"
        ]
    },

    "content_scripts": [{
        "matches":    ["*://*.facebook.com/"],
        "js":         ["content.js"],
        "run_at":     "document_end",
        "all_frames": false
    }],

    "permissions": [
        "contextMenus"
    ]
}

<强> content.js：

chrome.runtime.onMessage.addListener(function(msg) {

    /* Input validation */
    if (!msg.source || !msg.text) {
        console.error('Bad message format: ', msg);
        return;
    }

    /* Handle the selected text */
    switch (msg.source) {
    case 'Amazon':
    case 'Google':
        alert('Selected on ' + msg.source + ':\n' + msg.text);
        break;
    default:
        alert('Unknown source: ' + msg.source);
        break;
    }

});

<强> background.js：

var contextMenuID = 'copyToFB';
var googleRegex = /^https?:\/\/(?:[^\.]+\.)?google\..+/;
var amazonRegex = /^https?:\/\/(?:[^\.]+\.)?amazon\..+/;

/* `onUpdated` listener factory (for when FB has loaded) */
var listenerFactory = function(trgTabID, msgSrc, selectedText) {
    return function(tabId, info, tab) {
        if ((trgTabID === tabId) && (info.status === 'complete')) {
            chrome.tabs.onUpdated.removeListener(arguments.callee);
            chrome.tabs.sendMessage(trgTabID, {
                source: msgSrc,
                text: selectedText
            });
        }
    }
};

chrome.contextMenus.create({
    type:     'normal',
    id:       contextMenuID,
    title:    'Copy to Facebook',
    contexts: ['selection'],
    // For some reason documentsUrlPatterns 
    // does not seem to work (at least on Windows).
    // Theoratically, you should be able to limit the 
    // context-menu on specific sites only
    //documentUrlPatterns: [
        //'*://*.google.*/*',
        //'*://*.amazon.*/*'
    //],
    enabled:  true
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
    console.log('Context menu clicked: ', info.menuItemId);
    if (info.menuItemId === contextMenuID) {
        var selectedText = info.selectionText;
        console.log('Selected text: ', selectedText);
        if (!selectedText) {
            alert('Nothing to copy to Facebook !');
            return;
        }

        var url = info.frameUrl ? info.frameUrl : info.pageUrl;
        if (googleRegex.test(url)) {
            console.log('Google.com URL: ', url);

            /* Handle text selected on `google.com` */
            chrome.tabs.create({
                url: 'http://facebook.com/',
                active: true
            }, function(tab) {
                chrome.tabs.onUpdated.addListener(
                        listenerFactory(tab.id, 'Google', selectedText));
            });
        } else if (amazonRegex.test(url)) {
            console.log('Amazon.com URL: ', url);

            /* Handle text selected on `amazon.com` */
            chrome.tabs.create({
                url: 'http://facebook.com/',
                active: true
            }, function(tab) {
                chrome.tabs.onUpdated.addListener(
                        listenerFactory(tab.id, 'Amazon', selectedText));
            });
        } else {
            console.log('Non-matching URL: ', url);
        }
    }
});

最后的说明：

由于documentUrlPatterns似乎不起作用（至少在Windows上），因此上下文菜单会显示在每个页面上（当您选择一些文本时）。您可以添加额外的侦听器（例如chrome.tabs.onActivated等），以便在用户不在其中一个允许的URL上时删除或禁用上下文菜单。
跟踪操作FB选项卡并不是每次都创建新选项卡可能是个好主意。（或者您也可以查找已打开的（例如用户）FB选项卡。）

Chrome扩展和复制中的断言失败

1 个答案: