JQuery Chrome擴展無法正常工作

Question

我的內容有問題。 無論如何我都無法讓Jquery運行！ 也許你可以幫我弄清楚它是什么？

我試圖“捕獲”我在字段中寫入的值，並在單擊按鈕后將其傳遞以進行處理。 我收到“$ is not defined”錯誤，這可能意味着它無法加載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，它應該按預期工作。

內容腳本是在網頁上下文中運行的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 個解決方案

解決方案1
1 已采納 2017-11-22 11:28:32

JQuery Chrome擴展無法正常工作

問題描述

1 個解決方案

解決方案1 1 已采納 2017-11-22 11:28:32

解決方案1
1 已采納 2017-11-22 11:28:32