1. keniooi

    Posted

    keniooi
Changes in title
+JavaScriptでHTMLページデータの取得
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,108 @@
+#はじめに
+HTMLページデータを JavaScriptを使って取得します。
+
+#取得するデータ用のHTML
+
+次のページにあるデータを取得します。
+
+![image.png](https://qiita-image-store.s3.amazonaws.com/0/262366/2025f8f4-6adf-81f5-3d94-d936986adfeb.png)
+
+
+```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 を取得
+
+```javascript: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.');
+ });
+
+ }
+});
+```
+
+```javascript: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 を選択すると
+![image.png](https://qiita-image-store.s3.amazonaws.com/0/262366/b3d257f8-8c6d-23d6-a54d-0f727e64eeed.png)
+
+データが取得できます。
+![image.png](https://qiita-image-store.s3.amazonaws.com/0/262366/b154d803-8ddc-d10a-3fd7-0abe555f64a2.png)
+
+
+
+#参考
+[tabs.executeScript() - Mozilla | MDN](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/executeScript)
+[document - Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Document)
+[Promise - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise)