Question

我已经在这个问题上工作了几天了。我构建了小扩展，并使用我研究的方法来寻找解决方案。有些解决方案适用于小扩展，但是一旦我尝试将代码用于挖掘它仍然无法工作。我真的不想发这个帖子，因为那里有很多答案，但似乎没有一个对我有用。

这是我想要做的。我正在对填充表格的页面进行扩展。用户从reporting.html的输入字段输入他们想要的表的编号。然后，扩展名在该表中搜索一组nth-childs并从html中提取数据。然后，清理后的数据应显示在reporting.html弹出窗口中，方法是将其附加到id =＆＃34;报告＆＃34;。

我的代码当前获取用户输入将其连接到网址，在另一个标签中打开网址（这不会发生在最终扩展中，它只会获取数据），搜索表格，拉取数据并将其记录在控制台中。

我似乎可以将这些数据显示在reporting.html中。这是我的代码。您可以从我的一些尝试中看到注释掉的内容。这是我第一次真正尝试使用JavaScript和JQuery，所以请记住这一点。

清单：

<!doctype html>
<html>
    <head>
        <title>Reporting Popup</title>
        <style>
            body {
                font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
                font-size: 100%;
            }

            #format{
                width: 300px;
            }

            #list{
                list-style: none;
            }
        </style>
    </head>
    <body>
        <div id="format">

            <p>Please input the table number you want a report of.            
            </p>
            <form>
                <ul id="list">
                    <li>Table Number: <input name="table1" type="text" placeholder="#" id="t1"></li>
                    <br>
                    <input type="reset" name="reset" value="Reset">
                </ul>
            </form>
        </div>
        <button id="btn">Submit</button>
        <p id="reports"></p>

        <!--
<p>I am popup.html</p>
<button id="btn">hello</button><br>
msg from background.js: <div id="div"></div>

-->
        <script type="text/jscript" src="background.js"></script>
    </body>
</html>

Reporting.html：

function showIndex() {
    "use strict";

    //User inputs table number
    var userin = document.getElementById("t1").value,
        //Generic site hosting tables that are numbered
        site = "https://google.com/",
        index_url = site + userin;
    chrome.tabs.create({url: index_url});
}
document.getElementById('submit').addEventListener("click", showIndex);



function sendrec() {
    chrome.runtime.onMessage.addListener(function(message, _, sendResponse) {
        if (message.clicked) {
            sendResponse("Reporting works");
        }
    });
}

document.getElementById("btn").addEventListener("click", sendrec);


/*
Attempt One: 


chrome.runtime.onMessage.addListener(function(tm, _, sr) {
    if (tm.testResponse) {
        sr("This is a test message appended");
    }
});
*/

/*
Attempt Two:

console.log("I am background.js");

function hello() {
  console.log("hello");
  chrome.runtime.sendMessage({greeting: "hello"},
    function(response) {
      console.log("hello sent");
      document.getElementById("div").textContent = response.msg;
    });
}

document.getElementById("btn").addEventListener("click", hello);
*/

background.js：

/*function className() {
    "use strict";
    //Search table for this child, clean HTML and log.
    $("tr:nth-child(1)").each(function (index) {
        var str = $(this).html(),
            clean = str.replace(/(<th[^>]*>|<\/th>|<br>)/g, "");
        if (index === 2) {
            console.log('Assests : ' + clean);
        }
    });

    //Search table for this child, clean HTML and log.
    $("td:nth-child(n)").each(function (index) {
        var str = $(this).html();
        if (index === 10) {

            console.log('Expenses : ' + str);
        }

    });

}*/



chrome.runtime.sendMessage({clicked: true}, function(response) {
    log("what happened? " + response);
});




/*
Attempt One:

}addButton("Test Message", function() {
  chrome.runtime.sendMessage({testResponse: true}, function(whatdo) {
    log("Will this work: " + whatdo);
  });
});
*/

/*
Attempt Two:
console.log("I am popup.js");

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

content.js：

{{1}}

按钮点击后Chrome不会传递消息

0 个答案: