はじめに

HTMLページデータを JavaScriptを使って取得します。

取得するデータ用のHTML

次のページにあるデータを取得します。

sample.html

<HTML>
<BODY>
    <TABLE id="personList" class="persons" border="1">
        <TR class="person">
            <TD class="id">123</TD>
            <TD class="name">Sato Taro</TD>
            <TD class="email">taro@sample.com</TD>
        </TR>
        <TR class="person">
            <TD class="id">124</TD>
            <TD class="name">Suzuki Hana</TD>
            <TD class="email">hana@sample.com</TD>
        </TR>
    </TABLE>
</BODY>
</HTML>

background script からページへ javascriptの挿入

ページの右クリックメニューから JavaScriptを実行してデータを取得するようにプログラムを作成します。background.js からでは、実行しているページの document が取得できなかったので、JavaScript をページに挿入して実行するようにします。

ポイント
* browser.tabs.executeScript で JavaScriptをページに挿入
* 起点となる element を document.getElementById で取得
* element.childNodesでも取得できましたが、\t など余分なデータが入っていたので childrenで子element を取得

background.js

browser.contextMenus.create({
    id: "getTableData",
    title: "get table data",
    contexts: ["all"]
})

browser.contextMenus.onClicked.addListener((info, tab) => {
    if (info.menuItemId === "getTableData") {
        let executing = browser.tabs.executeScript(
                tab.id, {
                file: "/gettabledata.js"
            });
        executing.then(function(val) { 
                console.log("gettabledata.js executed"); 
                })
            .catch((reason) => { 
                console.log('gettabledata.js failed ('+reason+') here.');
                });

    }
});

gettabledata.js

getTableData();

function getTableData() {
    const personList = document.getElementById("personList");
    const persons = [];
    for (let i = 0; i < personList.children.length; i++) { // tbody
        console.log(personList.children);
        for (let j = 0; j < personList.children[i].children.length; j++) { // person
            const person = new Object();
            for (let k = 0; k < personList.children[i].children[j].children.length; k++) { // td
                if (personList.children[i].children[j].children[k].className
                        .indexOf("id") >= 0) {
                    person.id = personList.children[i].children[j].children[k].innerHTML;
                    console.log(person.id);
                }
                if (personList.children[i].children[j].children[k].className
                        .indexOf("name") >= 0) {
                    person.name = personList.children[i].children[j].children[k].innerHTML;
                    console.log(person.name);
                }
                if (personList.children[i].children[j].children[k].className
                        .indexOf("email") >= 0) {
                    person.email = personList.children[i].children[j].children[k].innerHTML;
                    console.log(person.email);
                }
            }
            persons.push(person);
        }
    }
    console.log(persons);
}

まとめ

右クリックメニューで get table data を選択すると

データが取得できます。

参考

tabs.executeScript() - Mozilla | MDN
document - Web API インターフェイス | MDN
Promise - JavaScript | MDN

JavaScriptでHTMLページデータの取得

はじめに

取得するデータ用のHTML

background script からページへ javascriptの挿入

まとめ

参考