在 Chrome 扩展程序中运行 Javascript -> 基本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19205823/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Run Javascript in Chrome Extension -> Basic?
提问by Albert
I get the feeling I'm missing something very obvious, but I've been looking everywhere and can't seem to make this work. In short, I want to turn a small Javascript script into a chrome extension to make it easier to use.
我觉得我错过了一些非常明显的东西，但我一直在到处寻找，似乎无法完成这项工作。简而言之，我想将一个小的 Javascript 脚本变成一个 chrome 扩展程序，以使其更易于使用。
The script just reads text from a textArea, modifies the script and outputs it into a div. It works perfectly with any browser when running standalone, but doesn't seem to want to work when ran as a Chrome extension
该脚本只是从 textArea 读取文本，修改脚本并将其输出到 div 中。它在独立运行时适用于任何浏览器，但在作为 Chrome 扩展程序运行时似乎不想工作
Here are the files (I'm basically trying to convert the example):
以下是文件（我基本上是在尝试转换示例）：
Thanks!
谢谢！
manifest.json
清单文件.json
{
"manifest_version": 2,
"name": "One-click Kittens",
"description": "This extension demonstrates a 'browser action' with kittens.",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"https://secure.flickr.com/"
]
}
popup.html
弹出窗口.html
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<style>
body {
min-width: 357px;
overflow-x: hidden;
}
img {
margin: 5px;
border: 2px solid black;
vertical-align: middle;
width: 75px;
height: 75px;
}
</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="popup.js"></script>
</head>
<body>
<textarea id="source">Text Entry.</textarea>
<button onclick="main()" id="buttons">Generate</button>
<div id="result">
</div>
</body>
</html>
popup.js
弹出窗口.js
function main() {
var source = document.getElementById('source').value;
document.getElementById("result").innerHTML = source;
}
回答by Tamil Selvan C
According to chrome extension documentation,
根据 chrome 扩展文档，
Inline JavaScript will not be executed. This restriction bans both inline <script>blocks and inline event handlers (e.g. <button onclick="...">).
不会执行内联 JavaScript。此限制禁止内联<script>块和内联事件处理程序（例如<button onclick="...">）。
Read: http://developer.chrome.com/extensions/contentSecurityPolicy.html#JSExecution
阅读：http: //developer.chrome.com/extensions/contentSecurityPolicy.html#JSExecution
Use in popup.js as
在 popup.js 中用作
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('button').addEventListener('click', main);
});
function main() {
var source = document.getElementById('source').value;
document.getElementById("result").innerHTML = source;
}
