Question

我正在学习编写chrome扩展，并希望将jQuery包含在我正在使用的文件中。我在这里已经阅读了很多答案，但我仍然没有得到它。我可能会以错误的方式去做，所以请告诉我。在我的浏览器弹出窗口popup.html中，我让用户单击一个按钮，然后调用我的content.js文件，这只是一个简单的警报，但最终我打算用它来操作页面上的DOM扩展用于。我想附加一个本地保存的jQuery库副本，这样我就可以用jQuery编写我的DOM操作代码了。我已经尝试将其添加为我的后台文件，同样也在我的content_script部分中添加，但它似乎仍然没有加载。这是我的代码

的manifest.json

{
    "manifest_version": 2,

    "name": "Test",
    "description": "Test",
    "version": "1.0",

    "permissions": [
            "tabs", "<all_urls>"
    ],

    "browser_action": {
        "default_icon": "wfhm.png",
        "default_popup": "popup.html"
    },

    "icons": {
        "128": "wfhm128.png"
    },

    "background": {
        "scripts": ["jquery.js"]
    }
}

popup.html

<!DOCTYPE html>
<html>
  <body style="width: 300px"> 
    <h2>test</h2>
    <input type='text' placeholder='Search by name..'/>
    <button id="btnSearch">Search</button>
    <script type="text/javascript" src="popup.js"></script>
  </body>
</html>

popup.js

function search() {
  chrome.tabs.executeScript({
    file: 'content.js'
  }); 
}

document.getElementById('btnSearch').addEventListener('click', search);

和content.js

$(function(){
    alert('hi');
    $('body').css('background-color', 'yellow');
});

Answer 1

后台脚本与弹出脚本（以及内容脚本）位于不同的环境中。这意味着你加载的jQuery没有被看到。相反，您需要使用popup.js来执行jQuery，然后使用回调来执行您的内容脚本：

popup.js：

function search() {
  chrome.tabs.executeScript({file: 'jquery.js'},function() {
    chrome.tabs.executeScript({file: 'content.js'});
  });
}

document.getElementById('btnSearch').addEventListener('click', search);

由于选项卡已经加载，因此您无需担心内容脚本中的$(function())。你可以运行你的脚本。

如何在这个chrome扩展文件中包含jQuery？

1 个答案: