Question

如果用户访问存储在我的数据库中的URL，我想创建一个包含DIV的消息。实际上，它在一个警报消息中工作，但我想要DIV，所以我应该通过contentscript.js访问页面的DOM并且它的工作但我怎么能阻止函数在contentscript.js中工作，因为我希望函数在我之后工作检查了background.js中的URL！

我阅读了标签，但只有在用户点击浏览器操作的图标时才会运行，在我的情况下，用户没有点击他刚刚在www中浏览的任何图标。

contentscript.js

chrome.runtime.sendMessage(window.location.href);
var pathname = window.location.pathname; // Returns path only
var url      = window.location.href; 
//document.getElementsByTagName('title')[0].innerText

function MessageBox(){
    document.documentElement.style.height = '100%';
    document.body.style.height = '100%';
    document.documentElement.style.width = '100%';
    document.body.style.width = '100%';

    var div = document.createElement( 'div' );
    var btnForm = document.createElement( 'form' );
    var btn = document.createElement( 'input' );

    //append all elements
    document.body.appendChild( div );
    div.appendChild( btnForm );
    btnForm.appendChild( btn );
    //set attributes for div
    div.id = 'myDivId';
    div.style.position = 'fixed';
    div.style.top = '80%';
    div.style.left = '77%';
    div.style.width = '22%';   
    div.style.height = '17%';
    div.style.backgroundColor = 'white';
    div.style.border='1px solid red';

    //set attributes for btnForm
    btnForm.action = '';

    //set attributes for btn
    //"btn.removeAttribute( 'style' );
    btn.type = 'button';
    btn.value = 'X';
    btn.style.position = 'reltive';
    btn.style.top = '10%';
    btn.style.left = '80%';
    btn.style.width = '5%';   
    btn.style.height = '3%';   
}

background.js

chrome.runtime.onMessage.addListener(function(response, sender, sendResponse) {

    $.ajax({
        type: 'GET',
        url: 'http://mywebsite.com/api/route',
        dataType: 'json',
    }).success(function(results) {
        for (var i = 0; i < results.length; i++) {
            if (results[i].url === response) {
                alert("This page in my database"); // this work but I don't want an alert message
            } //if
        } //for
    });
});

Answer 1

chrome.runtime.sendMessage是异步方法。您可以在完成工作时传递回调方法并在后台脚本中调用sendResponse

在后台脚本中：

chrome.runtime.onMessage.addListener(function(response, sender, sendResponse) {

    $.ajax({
        type: 'GET',
        url: 'http://mywebsite.com/api/route',
        dataType: 'json',
    }).success(function(results) {
        for (var i = 0; i < results.length; i++) {
            if (results[i].url === response) {
                sendResponse(true);
                return;
            }
        }

        sendResponse(false);
    });

    return true; // tell chrome about runnning async job
});

在您的内容脚本中执行此操作

chrome.runtime.sendMessage(window.location.href, function(result) {
    if (result) {
        // Found
        MessageBox();
    }
});

详细了解此处传递的消息https://developer.chrome.com/extensions/messaging

Chrome扩展程序：来自background.js

1 个答案: