操纵扩展弹出窗口的DOM

时间:2018-06-04 10:42:35

标签: javascript google-chrome dom google-chrome-extension

我是新的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
}

0 个答案:

没有答案