問題上Chrome中運行的jQuery擴展

我想開發一個簡單的cheome擴展，但我不能夠設置的jQuery與它的工作：問題上Chrome中運行的jQuery擴展

這裏是我的文件結構：

--root
- manifest.json的
- popup.html
- 的script.js
- JS
- jquery.js和
- clip.js

這裏是代碼，我有manifest.json

{ 
    "manifest_version": 2, 

    "name": "My ext", 
    "description": "This is a Development.", 
    "version": "1.0", 

    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 
    "permissions": [ 
    "https://secure.flickr.com/" 
    ], 

    "content_scripts": [ 
    { 
    "all_frames": false, 
    "matches": ["<all_urls>"], 
    "exclude_matches": [], 
     "css": [ 
     "css/content/page.css" 
     ], 
     "js": [ 
     "js/jquery.js", 
     "js/clip.js" 
     ] 
    } 
    ] 
}

和popup.html爲：

<!doctype html> 
<html> 
    <head> 
    <title>My app</title> 
    <style>body {min-width: 357px;overflow-x: hidden;} </style> 
    <!-- 
     - JavaScript and HTML must be in separate files: see our Content Security 
     - Policy documentation[1] for details and explanation. 
     - 
     - [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html 
    --> 
    <script src="script.js"></script> 
    </head> 
    <body> 
    <table style="width:300px"> 
<tr> 
    <td id="fname">Jill</td> 
    <td>Smith</td> 
    <td>50</td> 
</tr> 
<tr> 
    <td>Eve</td> 
    <td>Jackson</td> 
    <td>94</td> 
</tr> 
</table> 
    </body> 
</html>

最後的script.js爲：

$("#fname").on("click", function() { 
    alert("HI"); 
});

我也trired由CDN調用jQuery和申報文件準備的JavaScript通過<head>同時運行的jQuery在頁面上，但它也沒有工作。

<!doctype html> 
<html> 
    <head> 
    <title>My app</title> 
    <style>body {min-width: 357px;overflow-x: hidden;} </style> 
    <!-- 
     - JavaScript and HTML must be in separate files: see our Content Security 
     - Policy documentation[1] for details and explanation. 
     - 
     - [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html 
    --> 
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script> 
    $(document).ready(function() { 
    $("#fname").on("click", function() { 
     alert("HI"); 
     }); 
    }); 
    </script> 
    </head> 
    <body> 
    <table style="width:300px"> 
<tr> 
    <td id="fname">Jill</td> 
    <td>Smith</td> 
    <td>50</td> 
</tr> 
<tr> 
    <td>Eve</td> 
    <td>Jackson</td> 
    <td>94</td> 
</tr> 
</table> 
    </body> 
</html>

你能讓我知道我做錯了什麼嗎？

來源

2014-02-13 user3162145

您的設置似乎有幾個問題。

您可能想要閱讀內容腳本，因爲它們看起來並不像您認爲的那樣。內容腳本是在您注入其他網站的頁面時。這不是你的頁面。你實際上是在他們的頁面中插入jquery文件。
https://developer.chrome.com/extensions/content_scripts.html

內容腳本

內容腳本是在web頁面的上下文中運行JavaScript文件。 http://developer.chrome.com/extensions/contentSecurityPolicy.html#JSExecution
：通過使用標準的文檔對象模型（DOM），他們可以閱讀網頁的細節瀏覽器訪問，或更改

而且，你不能沒有設置安全策略運行內嵌的JavaScript

聯JavaScript將不被執行

聯JavaScript將不被執行。此限制禁止內聯塊和內聯事件處理程序（例如）。

您是否嘗試過將jQueryCDN和您的script.js添加到HTML的頭部？就像這樣：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="script.js"></script>

您的manifest.json還應該包括以下內容：

"content_security_policy": "script-src 'self' https://*.googleapis.com; object-src 'self'"

來源

2014-02-13 20:13:03

感謝埃斯特班菲利克斯，這是非常有幫助的，但是，怎麼樣解決呢？我如何添加jQuery到擴展？ – user3162145

@ user3162145我更新了我的答案，你差不多已經有了！你只需要結合兩種方法！ –

是啊實際上在最後的代碼示例在帖子中我將代碼添加到但jQuery不能正常工作！ – user3162145

問題上Chrome中運行的jQuery擴展

回答

相關問題