Я делаю свое первое расширение для Chrome и мне нужно извлечь данные из одной таблицы и добавить их в поля страницы popup.html.Мне нужно сделать это без jquery.
Как получить доступ к element.innerHTML по идентификатору из текущей вкладки и добавить их на всплывающую страницу.
Я установил тестовую страницу с таблицами, для которых у тегов TD были уникальные идентификаторы.
<tr>
<td><div id="field1a">Data Block 1-A</div></td>
<td><div id="field2a">Data Block 2-A</div></td>
<td><div id="field3a">Data Block 3-A</div></td>
<td><div id="field4a">Data Block 4-A</div></td>
</tr>
Мне нужно взять текст с ID = ”field1a” на одной главной странице и добавить егок форме на странице popup.html.
Вот мой код. manifest.json
{
"manifest_version": 2,
"name": "Harvesting Data 8.",
"version": "1.8",
"description": "Pull text from select fileds.",
"icons": {
"128": "img/icon128.png",
"48": "img/icon48.png",
"16": "img/icon16.png"
},
"browser_action": {
"default_icon": "img/icon16.png",
"default_popup": "popup.html"
},
"options_page": "options.html",
"permissions":[
"activeTab",
"storage"
],
"content_scripts": [{
"matches": [
"https://www.steampunkferret.com/*"
],
"js": ["scripts/background.js"]
}]
}
popup.html
<!DOCTYPE html>
</html lang="en">
<head>
<meta charset="utf-8" />
<title>Harvester</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="scripts/popup.js"></script>
</head>
<body>
<button type="button" class="harvestButton" id="harvestButton" wdith="100%">Harvest Data</button>
<br />
<br /><form class="" action="https://www.steampunkferret.com/" target="_blank" method="post">
User ID:<input type="text" id="userID"><br /><br>
Data Block 1-A: <input type="text" id="field1Text"><br /><hr>
Data Block 2-B: <input type="text" id="field2Text"><br /><hr>
Data Block 3-C: <input type="text" id="field3Text"><br /><hr>
Data Block 4-D: <input type="text" id="field4Text"><br /><hr>
Data Block 2-D: <input type="text" id="field5Text"><br /><hr>
Data Block 4-A: <input type="text" id="field6Text"><br /><hr>
<input type="submit" id="submitButton" value="Submit Data">
</form>
</body>
</html>
background.js
chrome.runtime.onMessage.addListener(gotMessage);
function gotMessage(message, sender, sendResponse){
alert("Background Script Called.");
}
popup.js
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('harvestButton').addEventListener('click', harvesting);
});
function harvesting() {
getUserID();
pulledDataFromMainPage();
}
//setUserID() set the User UserID.
function getUserID() {
//alert('popup_js.myFunction() called');
chrome.storage.sync.get(['sfUserID'], function(chromInfo) {
document.getElementById('userID').value = chromInfo.sfUserID;
})
}
//This part will need to access the DOM of the page www.ferretforce.com/salesforce and pull text valus then add them to the popup.html form.
function pulledDataFromMainPage(){
alert('popup_js.pulledDataFromMainPage() called');
var field1 = document.getElementById('field1a').innerHTML;
var field2 = document.getElementById('field2b').innerHTML
var field3 = document.getElementById('field3c').innerHTML;
var field4 = document.getElementById('field4d').innerHTML;
var field5 = document.getElementById('field2d').innerHTML;
var field6 = document.getElementById('field4a').innerHTML;
document.getElementById('field1Text').value = field1;
document.getElementById('field2Text').value = field2;
document.getElementById('field3Text').value = field3;
document.getElementById('field4Text').value = field4;
document.getElementById('field5Text').value = field5;
document.getElementById('field6Text').value = field6;
}
Я знаю, что спрашиваю много, но я только начал делать расширение Chrome, и теперь я к этому, поэтому, если вы можете помочь, я бы оценил это.Я искал в Интернете и вижу некоторые примеры, которые используют Jquery или что-то вроде этого.Я хотел бы сделать это в HTM / JAVASCRIPT / CSS, который я могу написать.