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

#はじめに
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)