创建一个Chrome扩展，它将从主页抓取文本并将其添加到弹出页面。
创建一个Chrome扩展，它将从主页抓取文本并将其添加到弹出页面。
提问于 2018-12-11 03:39:15
我正在制作我的第一个chrome扩展，需要从一个表中提取数据并将其添加到popup.html页面的字段中。我需要在不使用jquery的情况下做到这一点。
如何从当前选项卡访问element.innerHTML by ID并将其添加到弹出页面。
我设置了一个测试页与表的TD标签有一个唯一的ID的。
<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;
}我知道我的要求很多，但我刚刚开始做铬扩展，我现在正在做这件事，所以如果你能帮助我，我会应用它。我在网上看到了一些使用Jquery或类似的例子。我想在HTM/JAVASCRIPT/CSS中做到这一点，我可以编写。
回答 1
Stack Overflow用户
发布于 2018-12-11 04:36:19
以其他方式调用内容脚本(而不是background.js)可能更好，因为还有实际的后台脚本……您需要将页面dom访问代码移动到内容脚本中的消息处理程序中-只有从那里您才能访问页面dom。然后，您将需要通过调用您的sendResponse来使用数据回复popup的初始请求。并且可以通过chrome.tabs.sendMessage和chrome.tabs.query({ active: true, currentWindow: true }, (tabs)=>{...})的弹出窗口进行初始调用，以找到活动的呼叫。
PS:既然您要填充输入字段，那么使用textContent可能比使用innerHtml更好。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53712488
复制相关文章
相似问题