Question

我的内容有问题。无论如何我都无法让Jquery运行！也许你可以帮我弄清楚它是什么？

我正在努力捕捉＆＃34;我在字段中写入的值，并在单击按钮后将其传递以进行处理。我收到了＆＃34; $未定义＆＃34;错误，这可能意味着它无法加载JQuery。

这是我的清单，我的HTML和我的代码：

 {
"name": "Test 2017",
"manifest_version": 2,
"version": "0.1",
"description": "TestApp Jquery",
"browser_action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
},
"background": {
    "scripts": ["jquery-3.2.1.min.js",
    "background.js"
    ]
},
"permissions": [
    "tabs", "http://*/*", "https://*/*"
],
"content_scripts": 
[
    {
        "matches": [ "http://*/*", "https://*/*"],
        "js":["jquery-3.2.1.min.js",
        "contentscript.js"]
    }
]
}

Popup.html：

 <html>
<head>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="popup.js"></script>
    <style type="text/css" media="screen">
        body { min-width:250px; text-align: center; }
        #click-me { font-size: 20px; }
    </style>
</head>
<body>
  <div>Input: <input id="input">
  <input id="click-me" type="button" value="Go!"/>
</body>

Popup.js

 function clickHandler(e) {
chrome.extension.sendMessage({directive: "popup-click"}, function(response) 
{
    this.close(); // close the popup when the background finishes processing 
request
});
}


 document.addEventListener('DOMContentLoaded', function () {
document.getElementById('click-me').addEventListener('click', clickHandler);
 })

background.js

 chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
    switch (request.directive) {
    case "popup-click":
        // execute the content script
        chrome.tabs.executeScript(null, { // defaults to the current tab
            file: "contentscript.js", // script to inject into page and run in sandbox
            allFrames: true // This injects script into iframes in the page and doesn't work before 4.0.266.0.
        });
        sendResponse({}); // sending back empty response to sender
        break;
    default:
        // helps debug when request directive doesn't match
        alert("Unmatched request of '" + request + "' from script to 
 background.js from " + sender);
    }
}
);

我尝试运行Jquery的Contentscript.js：

 var abc =  $("#input").val();
 console.log(abc);

然后我收到了错误。

这里有什么帮助吗？为什么我的扩展程序无法加载JQuery？我按正确的顺序加载了脚本。

提前致谢！

Answer 1

您无需使用内容脚本来实现您的目标。内容脚本用于控制浏览器中加载的网站的DOM。您尝试操作的按钮位于弹出窗口中，由popup.js控制，而不是contentscript.js。只需将jquery代码移动到popup.js，它应该按预期工作。

Content Scripts是在网页上下文中运行的JavaScript文件。通过使用标准文档对象模型（DOM），他们可以阅读浏览器访问的网页的详细信息，或对其进行更改。

Popup.html（此处没有任何更改，存在jquery脚本标记）：

 <html>
<head>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="popup.js"></script>
    <style type="text/css" media="screen">
        body { min-width:250px; text-align: center; }
        #click-me { font-size: 20px; }
    </style>
</head>
<body>
  <div>Input: <input id="input">
  <input id="click-me" type="button" value="Go!"/>
</body>

Popup.js：

     function clickHandler(e) {
    chrome.extension.sendMessage({directive: "popup-click"}, function(response) 
    {
        this.close(); // close the popup when the background finishes processing 
    request
    });
    }


     document.addEventListener('DOMContentLoaded', function () {
     document.getElementById('click-me').addEventListener('click', clickHandler);
     })    

    var abc =  $("#input").val();
    console.log(abc);

JQuery Chrome扩展程序无效

1 个答案: