javascript - 未加载谷歌浏览器扩展 jquery

标签 javascript jquery google-chrome-extension

在下面的 google chrome 扩展文件中,为什么我不能在 myscript.js 文件中使用 jquery 脚本,是不是 jquery 没有加载到 myscript.js 文件中,应该在 list 文件中进行哪些更改才能在 myscript.js 中使用 jquery

list .json

  {
    "manifest_version": 2,

    "name": "One-click Kittens",
    "description": "This extension demonstrates a browser action with kittens.",
    "version": "1.0",
     "background": { "scripts": ["jquery-1.9.1.min.js","myscript.js"] },

    "permissions": [
     "tabs", "http://*/*"
    ],
    "browser_action": {
      "default_icon": "icon.png",
      "default_popup": "popup.html"
    }
  }

我的脚本.js

 alert($("#extension-command-list").val());    //undefined
 alert($("#extension-command-list").html());   //undefined
 $(document).ready(function() {
    alert("hello world");  //not seen
 });

编辑:

"background": { "scripts": ["jquery-1.9.1.min.js"] },

 "content_scripts": [
 {
  "matches": ["https://*/*"],
  "js": ["myscript.js"]   or "js": ["jquery-1.9.1.min.js","myscript.js"]
 }
],

最佳答案

您得到 undefined 的原因是因为您没有指定背景页面。

所以.. Chrome 生成的后台页面,看起来就像

<html>

    <head></head>

    <body>
        <script src="jquery-1.9.1.min.js"></script>
        <script src="myscript.js"></script>
    </body>

</html>

如您所见,没有任何可以选择的元素,这就是为什么您的第一个 alert 返回 undefined 的原因。

无论如何,alert("hello world") 也应该显示,因为 DOMContentLoaded 或类似的 应该以任何方式触发。


您是否想选择您正在访问的网站的元素?

如果是这样,您应该将 myscript.js 放在 Content Script 中而不是背景页面。 您可以在那里访问网站的 DOM。


所以问题是,你在做什么?


如果你真的想在你的背景页面中选择元素,你必须指定一个, 看着 background pages网站向您展示,它非常简单:

{
"name": "My extension",
...
"background": {
"page": "background.html"
},
...
}

编辑:

  • "default_popup": "popup.html"

指的是Browser Actions Popup .使用浏览器 Action

[...] to put icons in the main Google Chrome toolbar, to the right of the address bar. In addition to its icon, a browser action can also have a tooltip, a badge, and a popup.

所以

If a browser action has a popup, the popup appears when the user clicks the icon. The popup can contain any HTML contents that you like, and it's automatically sized to fit its contents. To add a popup to your browser action, create an HTML file with the popup's contents. Specify the HTML file in the default_popup field of browser_action in the manifest, or call the setPopup method.

  • “背景”:“{...}”

A common need for extensions is to have a single long-running script to manage some task or state. Background pages to the rescue.
As the architecture overview explains, the background page is an HTML page that runs in the extension process. It exists for the lifetime of your extension, and only one instance of it at a time is active.

还有一个后台脚本访问 Chrome Extension 的 Api 的所有部分。 chrome.* 如果您分别请求了权限


现在假设,例如,您想使用某些功能扩展 chrome 的 ContextMenu。

为此,您首先要在后台页面中创建一个 contextMenuEntry。
就像您的后台页面一次只有一个实例在运行,并且在扩展的生命周期中,您的contextMenuEntry 只有它的 一个 实例,它在您的扩展程序运行时创建,并在您的扩展程序的生命周期 内保留。

现在假设您要在其中一个菜单项中显示当前选择的您正在访问的页面的文本。

为此,您需要访问 chrome.contextMenus API 方法,但内容脚本不允许使用它。

要使其正常工作,您需要通过例如chrome.extension.sendMessage

然后在后台页面中,您可以更新您的现有上下文菜单条目以显示所选文本。

对不起,我现在想不出更好的例子

关于javascript - 未加载谷歌浏览器扩展 jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15545899/

相关文章:

javascript - 如何使用 jquery-ui 使可拖动的 div 可调整大小

javascript - 使用 jQuery 选择 Div 的最后一个元素不起作用

jquery 移动 href 短信 android

javascript - jquery 专注于 sibling 而不关注 parent

javascript - 我如何将变量传递给 chrome.storage.sync.get()

internationalization - 维护 Chrome 扩展的翻译

javascript - CKEditor:调用没有工具栏按钮的插件功能

javascript - addClass 每次在每个克隆中追加

javascript - 使用 jQuery 更改文件名结尾

javascript - Vue CLI 3 防止某些输出文件的缓存破坏