Question

我正尝试在jquery上使用chrome.stroage的简单表单页面中激活popup.html。

这是我的manifest.json：

{
  "manifest_version": 2,
  "name": "Test Extension",
  "description": "Test description",
  "version": "1.0",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": ["jquery.min.js"],
    "persistent": true
  },
  "permissions": [
    "contextMenus",
    "storage"
  ],
  "icons": {
    "16": "icon.png",
    "32": "icon.png",
    "64": "icon.png",
    "128": "icon.png"
  }
}

这里是popup.html：

<!DOCTYPE html>
<html>
<head>
</head>
<body>

    <input type="text" placeholder="place text here" id="inputString" />
    <button id="clickme">save it</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="saveNumber.js"></script>
</body>
</html>

这里是test.js：

$(document).ready(function() {
    console.log('Hello world');
});

$('#clickme').on("click", function(){
    console.log('Saving...');
    saveText();
});

var inputField = document.getElementById('inputString');

function saveText() {
    console.log('Saving...');
    var stringToSave =  inputField.value;

    chrome.storage.sync.set({'theText': stringToSave}, function() {
        console.log('Settings saved');
    });
}

然而，当我点击扩展按钮...

单击弹出窗口时，jQuery甚至不会说Hello world。

我做错了什么？

Answer 1

首先，您需要学习debug popups。

右键单击扩展程序的工具栏按钮，然后选择“检查弹出窗口”。这将打开附加到弹出窗口的开发工具，并允许您查看错误。

如果你这样做，你会发现尝试加载jQuery会导致错误。

Chrome对扩展程序的脚本安全性非常严格。默认情况下，您为not allowed to load scripts from any external sources。

您可以relax that，允许jQuery从支持HTTPS的CDN加载;但这不是必需的，也不是最好的主意 - 它更慢，更不可靠。

您只需下载jQuery，将其放入您的扩展程序并加载就像saveNumber.js

一样

JavaScript - Chrome扩展程序点击jquery无效

1 个答案: