Blockly into Chrome extension
265 views
Skip to first unread message
smallbot
Jun 14, 2016, 4:30:10 PM6/14/16
to Blockly
Hi everyone,
I am new to coding. So please excuse me for naive questions.
I want to use blocks inside a Chrome extension.
I have followed a simple tutorial for how to create chrome extensions.
I have modified the main.html page as following
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="servo.js"></script>
<script src="blockly/blockly_uncompressed.js"></script>
<script src="blockly/generators/javascript.js"></script>
<script src="blockly/msg/js/en.js"></script>
<script src="javascript.js"></script>
<script src="blocks.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body onload="init()">
<label>
Port:
<select id="port-picker"></select>
</label>
<label>
Status:
<span id="status">Loading</span>
</label>
<label>
Input:
<input id="position-input" type="range" min="0" max="9" value="0">
</label>
<xml id="toolbox" style="display: none">
<category name="Page Parts">
<block type="page_header"></block>
<block type="page_text"></block>
</category>
<category name="Colors">
<block type="color_red"></block>
<block type="color_green"></block>
<block type="color_blue"></block>
<block type="color_black"></block>
<block type="color_white"></block>
<block type="color_chinna"></block>
</category>
<category name="Boolean">
<block type="logic_compare"></block>
<block type="logic_operation"></block>
<block type="logic_negate"></block>
<block type="logic_boolean"></block>
<block type="logic_null"></block>
<block type="logic_ternary"></block>
</category>
</xml>
</body>
</html>
I expected that Blocks will appear in the tool box, but I could not see them. Can anyone point me, what's wrong with my code.
Is there any tutorial for how to inject Blocks in to Chrome extensions? Please let me know.
賑早見琥珀
May 19, 2017, 11:15:38 AM5/19/17
to Blockly
Hi smallbot,
Background HTML files does NOT allow <script> tag
inside <head> for some web security.....
You have to remove these <script> tags in background html,
and try adding "scripts" to the manifest.json file of your extension
such as following:
"background" : {
"scripts" : [ "blockly/blockly_uncompressed.js",
"blockly/generators/javascript.js", .....
}
Besides, I don't know whether if extension be able to
access the path location of Blockly related javascripts.
<html><head><meta charset="utf-8"><script src="servo.js"></script><script src="blockly/blockly_uncompressed.js"></script><script src="blockly/generators/javascript.js"></script><script src="blockly/msg/js/en.js"></script><script src="javascript.js"></script><script src="blocks.js"></script><link rel="stylesheet" href="styles.css"></head>
...
Reply all
Reply to author
Forward
0 new messages