我是新的Chrome扩展程序,我正在寻找指导。
目前,我正试图在我的分机弹出窗口中的下拉菜单中加载来自api通话的数据。
虽然数据来自api,但我无法访问弹出DOM。我听说我应该使用sendMessage,但我无法找到原因和方法的正确解释。
这就是我所拥有的:
popup.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="search_panel">
<div class="logos" id="head_b">
<img src="chrome-extension://hfbigccdfoeegoicoioalffcngoekege/img/tedBtn.png" alt="" class="logo_explicite">
</div>
<p id="hep">p</p>
<div class="form">
<fieldset>
<label for="subject" class="subject_label">Sujets</label>
<select name="subject" id="subject" placeholder="Sélectionnez un sujet">
<option value="" data-keywords="" data-desc="" selected>select subjects</option>
<option value="Sujet 1" data-desc="bla blabla bla">subject 1</option>
<option value="Sujet 2" data-desc="bla blabla bla">subject 2</option>
</select>
</fieldset>
</div>
</div>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
popup.js
function load() {
chrome.tabs.executeScript({
file: 'load.js'
});
}
load();
load.js
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://url/api/subject/list", false);
xhr.send();
var result = xhr.responseText;
var obj = JSON.parse(result);
console.log(obj);
var select = $('#subject');
console.log(select); //undefined
// for(index in obj) {
// select.options[select.options.length] = new Option(obj[index], index);
// }
console.log(rep);
的manifest.json
{
"name": "-",
"description": "-",
"version": "0.1",
"permissions": [
"tabs","<all_urls>",
"https://url/*",
"http://url/*"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"web_accessible_resources": [
"img/*.png",
"reponses.json"
],
"content_scripts": [
{
"css": [ "style.css"],
"matches": [
"http://twitter.com/*",
"https://twitter.com/*"
],
"js": ["jquery.min.js", "content.js"]
}
],
"background" : { "scripts": ["background.js", "popup.js"] },
"manifest_version": 2
}