Question

嗨，所以我正在尝试创建一个谷歌浏览器插件，但实际上我正在尝试添加jquery以使我的生活更轻松。

所以我实际上在我的html中调用了另一个脚本文件，如此

<script src="myScript.js"></script>

我想知道是否可以将jquery注入脚本中，所以我不必完全依赖纯JavaScript。

我尝试通过清单文件注入：

{
  "manifest_version": 2,

  "name": "EXTENSION",
  "description": "This extension shows a Google Image search result for the current page",
  "version": "1.0",
  "icons": {
      "128": "icons/icon128.png", 
      "48": "icons/icon48.png", 
      "16": "icons/button.png"
  },
  "browser_action": {
    "default_icon": "icons/Logo.png",
    "default_popup": "popup.html"
  },
  "content_scripts":[{
    "matches": ["http://*/*","https://*/*"],
      "js": ["jquery-3.1.1.min.js","myScript.js"]
  }],
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/",
    "bookmarks",
    "history",
    "tabs"
  ]
}

但我似乎可以使用jquery 所以问题是我是否可以做这样的事情，如果是这样，我是否正确地做到了？

更新

我的HTML代码是

<!doctype html>
<head>
        <!-- this is the jquery-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

        <!-- Core CSS file -->
        <link rel="stylesheet" href="assets/plugin/photoSwipe/photoswipe.css"> 

        <!-- Skin CSS file (styling of UI - buttons, caption, etc.)
             In the folder of skin CSS file there are also:
             - .png and .svg icons sprite, 
             - preloader.gif (for browsers that do not support CSS animations) -->
        <link rel="stylesheet" href="assets/plugin/photoSwipe/default-skin/default-skin.css"> 
        <!-- Core JS file -->
        <script src="assets/plugin/photoSwipe/photoswipe.min.js"></script> 

        <!-- UI JS file -->
        <script src="assets/plugin/photoSwipe/photoswipe-ui-default.min.js"></script> 

        <!--this is my own Style sheet-->
        <link rel="stylesheet" type="text/css" href="assets/css/style.css">


    </head>
    <body>
        <div id="NavDiv">
            <h4 id="NavTitle">
                <strong>
                    Navigation
                </strong>
            </h4>
            <nav id="Navbar">
                <ul>
                    <li><a><h4>Chat Bot</h4></a></li>
                    <li><a><h4>Recent</h4></a></li>
                    <li><a><h4>Settings</h4></a></li>
                </ul>
            </nav>
        </div>
        <div id="dimmer">

        </div>
        <div id="container">
            <div id="Taskbar">
                <div id ="HambugerMenu">
                    <img id ="TitleLogo" class="img-responsive" src="assets/image/menu.png">
                </div>
                <div id = "TitleLogoDiv">
                    <img id ="TitleLogo" class="img-responsive" src="assets/image/TitleLogo.png">
                </div>
                <h3 id = "TaskbarTitle">Recent</h3>
            </div>
                <div id="content">

                </div>
        </div>
        <script src="myScript.js"></script>
    </body>

这是我的剧本

function ShowMenu(){
    var NavDiv = document.getElementById("NavDiv");
    NavDiv.style.WebkitTransform = "translateX(0)";
    NavDiv.style.msTransform = "translateX(0)";
    NavDiv.style.transition = "translateX(0)";
    NavDiv.style.transition= "all 0.1s linear";
    var dimmer = document.getElementById("dimmer");
    dimmer.style.visibility = "visible"
    dimmer.style.transition = "opacity 0.5s";
    dimmer.style.WebkitTransition = "opacity 0.5s";
    dimmer.style.msTransition = "opacity 0.5s";
    dimmer.style.opacity = 0.5;
}

function HideMenu(){
    var dimmer = document.getElementById("dimmer");
    dimmer.style.transition = "opacity 0.1s";
    dimmer.style.WebkitTransition = "opacity 0.1s";
    dimmer.style.msTransition = "opacity 0.1s";
    dimmer.style.opacity = 0;
    var NavDiv = document.getElementById("NavDiv");
    NavDiv.style.WebkitTransform = "translateX(-13em)";
    NavDiv.style.msTransform = "translateX(-10em)";
    NavDiv.style.transition = "translateX(-10em)";
    NavDiv.style.transition= "all 0.3s linear";
    setTimeout(function(){
        dimmer.style.visibility = "hidden";
     }, 300);
}

document.getElementById("HambugerMenu").onclick = function(){
    ShowMenu();
};
document.getElementById("dimmer").onclick = function(){
    HideMenu();
};
console.dir($('#dimmer')); <-----this is to test if jquery is working or not

Answer 1

这取决于你想要使用Jquery的位置，如果它在popup.html中，那么你必须将它添加到popup.html中的脚本声明之上。

<script src="jQuery.js"></script>

如果您想在background.html中使用它，则必须将其添加到清单（https://developer.chrome.com/extensions/event_pages）中。

"background": { "scripts": ["jquery.js"], "persistent": false },

如果在内容脚本中，您可以将其添加到清单中，以便：

"content_scripts":[{ "matches": ["http://*/*","https://*/*"], "js": ["jquery-3.1.1.min.js","myScript.js"] }],

如何使用jquery来操纵谷歌浏览器扩展DOM元素？

1 个答案: