在Chrome扩展程序中运行Javascript - >基本？ [英] Run Javascript in Chrome Extension -> Basic?
问题描述
该脚本只是从textArea中读取文本，修改脚本并将其输出到div中。它可以在单独运行时与任何浏览器完美协作，但在以Chrome扩展模式运行时似乎不想工作。
这里是文件（我基本上是在尝试转换示例）：
谢谢！
manifest.json
$ $ b $
{
manifest_version：2，
name：一键小猫，
描述：这个扩展名演示了一个带有小猫的'浏览器动作'。，
version：1.0，
browser_action：{
default_icon： icon.png，
default_popup：popup.html
}，
权限：[
https://secure.flickr.com/
]
}
popup.html
<！doctype html>
< html>
< head>
< title>入门Extension的弹出式菜单< / title>
< style>
body {
min-width：357px;
overflow-x：hidden;
}
img {
margin：5px;
border：2px纯黑色;
vertical-align：middle;
width：75px;
height：75px;
}
< / style>
<！ - -
- JavaScript和HTML必须位于单独的文件中：有关详细信息和说明，请参阅我们的Content Security
- 策略文档[1]。
-
- [1]：http://developer.chrome.com/extensions/contentSecurityPolicy.html
- >
< script src =popup.js>< / script>
< / head>
< body>
< textarea id =source>文本输入。< / textarea>
< button onclick =main（）id =buttons>生成< / button>
< div id =result>
< / div>
< / body>
< / html>
function main（）{
var source = document.getElementById（'source'）。value;
document.getElementById（result）。innerHTML = source;
}
内联JavaScript不会被执行。此限制禁止内联< script> 块和内联事件处理程序（例如< button onclick =...> ）。
阅读： http：// developer.chrome.com/extensions/contentSecurityPolicy.html#JSExecution
在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;
}
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.
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
Here are the files (I'm basically trying to convert the example):
Thanks!
manifest.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
<!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
function main() {
var source = document.getElementById('source').value;
document.getElementById("result").innerHTML = source;
}
According to chrome extension documentation,
Inline JavaScript will not be executed. This restriction bans both inline <script> blocks and inline event handlers (e.g. <button onclick="...">).
Read: http://developer.chrome.com/extensions/contentSecurityPolicy.html#JSExecution
Use in popup.js as
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('button').addEventListener('click', main);
});
function main() {
var source = document.getElementById('source').value;
document.getElementById("result").innerHTML = source;
}
这篇关于在Chrome扩展程序中运行Javascript - >基本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
