Контент и фоновая коммуникация

Question

Я хочу создать расширение для определенного сайта, чтобы предоставить дополнительные возможности форматирования и обмена, которых у них нет на данный момент.

У меня возникли проблемы с тем, чтобы что-то было правильно общаться, и, похоже, нет четко изложенного примера.

Manifest:

{
    "name": "Test",
    "description": "Testing.",
    "version": "1.0",
    "background_page": "background.html",
    "permissions": [
        "tabs", "http://www.sitedomain.com/*"
    ],
    "content_scripts": [
        {
            "matches": ["*://*.sitedomain.com/*"],
            "js": ["jquery.min.js", "test.js"],
            "css": ["test.css"]
        }
    ]
}

Сценарий содержания:

$(document).ready(function () {
    alert('test js fired');
    $("#ColumnContainer div.item").each(function () {
        $(this).css("background-color", "skyBlue");
        var itemId = $(this).children("a.itemImage").attr("href");
        $(this).children(".details").append("<a href=\"javscript:void(false);\"  onclick=\"gotoItem('" + itemId + "');\">Goto Item</a>");

    });
});
chrome.extension.onRequest.addListener(function (request, sender, sendResponse) {
    alert('listener request');
    alert(request);
}); 

JavaScript фонового HTML:

    chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
        if (changeInfo.status == "complete") {
            if (tab.url.indexOf("sitedomain.com") > -1) {

                chrome.tabs.executeScript(null, {file: "test.js"});
            }

        }
    });
    chrome.tabs.sendRequest(tabId, request, responseCallback);
    function responseCallback() {
        alert('response callback');
    }
    function gotoItem(itemId) {
        alert('goto Item - ' + itemId);
    }

Приведенный выше код добавляет ссылку и меняет стиль на странице клиента при загрузке sitedomain.com. Тем не менее, мне не повезло, что метод gotoItem был запущен, Chrome Dev Tools показывает undefined. Я пробовал разные комбинации, но пока никак не могу понять слушателей и запросы.

Мне бы очень хотелось увидеть чистый пример, который просто показывает, как вызывать метод с каждого сайта.

Answer 1

Я вижу две проблемы с вашим кодом. 1) функция gotoItem определена на фоновой странице и content_scripts не может получить доступ к функциям там. 2) content_scripts и javascript на страницах, в которые они вставлены, не могут взаимодействовать, поэтому ваш onclick не может быть частью HTML-ссылки.

Исправить # 1 так же просто, как переместить функцию gotoItem в content_script.

Чтобы исправить # 2, должно работать что-то вроде следующего.

$("#ColumnContainer div.item").each(function(){
    $(this).css("background-color","skyBlue");
    var itemId = $(this).children("a.itemImage").attr("href");
    var $link = $('<a href="javscript:void(false);">Goto Item</a>');
    $link.click(function() {
      gotoItem(itemId);
    }
    $(this).children(".details").append($link);
});

Возможно, вам придется изменить способ передачи itemId.