Possible to use AngularJS for a Chrome extension's options page? - javascript

For my Chrome Extension's options page, I'd like to use Angular.js (just for the options page, not for the extension's background JS or content scripts), but including it in my page and doing something like:
<!doctype html>
<html ng-app>
<head>
<title>Shortkeys Options</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/angular.min.js" type="text/javascript"></script>
<script src="../js/options.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/options.css" />
</head>
<body>
<div ng-controller="OptionsCtrl">
<div ng-repeat="key in keys"></table>
</div>
</body>
</html>
...throws this error in the dev tools console and nothing runs:
Error: Code generation from strings disallowed for this context
I assume it's because Angular is trying to write tags to the page or assign inline event handlers or something that runs inline JS, which is not allowed in Chrome extensions, so is there any way around this? Can I tell Angular to avoid using inline JS somehow, for example?

You can use manifest_version: 2 by specifying that angular run in CSP-compliant mode. Just add the ng-csp attribute to the <html> in your panel page.
So your HTML would be like this:
<!doctype html>
<html ng-csp ng-app>
<head>
<title>Shortkeys Options</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/angular.min.js" type="text/javascript"></script>
<script src="../js/options.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/options.css" />
</head>
<body>
<div ng-controller="OptionsCtrl">
<div ng-repeat="key in keys"></table>
</div>
</body>
</html>

Related

Where to load script tags in Vue?

I am new to Vue.js and I am simply trying to load script tags to the page, like jQuery for example. I tried adding the scripts to the end of the body in the index.html file, but they come back as 404s.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<div id="app"></div>
<!-- JQUERY -->
<script src="assets/js/jquery-2.1.4.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/tipr.min.js"></script>
</body>
</html>
Try moving them to the /static/ folder &/or prefixing the paths with ./ or /

Marionette 3 templates work inline, but not when included in a separate file

I've been able to get my Marionette 3 templates to work when they are inline. When I include the template in an .html file I get a NoTemplateError when rendering the view. I've seen examples that use TemplateCache and require, but I don't understand why I can't just include the template .html file in the body and have it work.
The main source file
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>Gmail API Quickstart</title>
<meta charset='utf-8' />
</head>
<body>
<script src="jquery.js" type="text/javascript"></script>
<script src="underscore_1_8_3.js" type="text/javascript"></script>
<script src="backbone.js" type="text/javascript"></script>
<script src="backbone.radio.js" type="text/javascript"></script>
<script src="backbone.marionette_3_2_0.js" type="text/javascript"></script>
<script src="bootstrap.js" type="text/javascript"></script>
<link href="bootstrap.css" rel="stylesheet">
<link href="mycss.css" rel="stylesheet">
<script src="messageDetails.js" type="text/javascript"></script>
// This template works
<script type="x-template/underscore" id="mailItem-template">
<div id="mailItem" class="col-md-12">
<img src="trash_recyclebin_empty_closed.png" align = "top" width="18" height="18"/>
<input type="checkbox" style="padding: 10;"/>
</div>
</script>
// If I comment out the above template and put the template in .html file it doesn't work in the view. I've tried
<link href="mailItem.tmpl.html" type="text/html"/>
// I've also tried this, but I get an Syntax error
<script src="mailItem.tmpl.html" type="text/javascript"/>
// View that uses the template
<script src="MessageDetailsView.js" type="text/javascript"></script>
This is because using the <script> tag isn't going to load it. Essentially if a <script> tag isn't javascript the browser will leave it alone.. this is handy since you can grab it later to use it as a template, but the browser isn't ever going to load the external template.
What you could do is make your external template a javascript.
var myTemplate = _.('My template text');
then you should be able to load that via a tag an expect myTemplate to be available globally.
But your best options is most likely to use a build tool like webpack to precompile and import your templates as javascript into your script directly.
More info:
Explanation of <script type = "text/template"> ... </script>

AngularJS: "Hello Word" not working

I've had a look at similar answers but haven't seen an answer to this.
My directory structure is simply:
Test
|---index.html
|---bootstrap.min.css
|---angular.min.js
|---app.js
My code:
<!doctype HTML>
<html ng-app="store">
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<p>I am {{4 + 6}}</p>
<p>{{"Hello" + " you"}}</p>
</body>
</html>
Sadly, running this in the browser (file:///Users/Will/Projects/angular/demo/index.html), it doesn't work. Is this because it's local?
Consider that the following works when loaded directly from the filesystem (and not a webserver):
<!doctype HTML>
<html ng-app>
<head>
<title>Test</title>
</head>
<body>
<script type="text/javascript" src="angular.min.js"></script>
<p>I am {{4 + 6}}</p>
<p>{{"Hello" + " you"}}</p>
</body>
</html>
Note that I have changed "ng-app='store'" to "ng-app", so that angular is not trying to load the 'store' module.
This shows that angular, on its own, is doing its thing correctly. So the issue is somewhere within the store module. As suggested in the comments, check your browser console for error messages, and troubleshoot those.

Why i am getting 404 error on js included in html?

I am building a webapp using Maven, Spring 4, Angularjs and Thymeleaf. I create some Thymeleaf template ( in directoty templates/fragments ). I have attached a screenshot of my eclipse web project.
The problem i am facing is about referencing libraries and css file, i am getting 404 not found on firebug.
HTML (index.html)
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<script type="text/javascript" href="/js/lib/angular.js" th:src="#{/js/lib/angular.js}"></script>
<script type="text/javascript" th:src="#{/js/lib/ui-bootstrap-tpls-0.11.0.js}"></script>
<title>Jobly - login page</title>
</head>
<body>
<div th:include="templates/fragments/header::header"></div>
<h1>Hello on a second page!</h1>
<p>Click <a th:href="#{/hello}">here</a> to go back.</p>
<div th:include="templates/fragments/footer::footer"></div>
</body>
</html>
Here is the snippet code of header template :
<link th:href="#{/css/bootstrap.min.css}" rel="stylesheet" media="screen"/>
<script type="text/javascript" th:src="#{/js/lib/jquery-1.11.1.min.js}"></script>
<script type="text/javascript" th:src="#{/js/lib/bootstrap.min.js}"></script>
Below the screenshot of 404 error
I've resolved my problem. It was a problem of specifing resources location and mapping in Spring configuration file. I add in app-servlet.xml
<mvc:resources mapping="/**" location="/"/>

jQuery mobile - DOM Exception 18

I am trying to experiment with jQuery mobile, but can't seem to get started.
I have the following HMTL file hosted on a local server:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
</body>
</html>
Which is causing
Javascript error: undefined SECUIRTY_ERR: DOM Exception 18
when accessed from my iPhone from http://192.168.1.1:8000/mobile.html
Did you link the CSS stylesheet file as well before the jquery script include tags?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
Also, in order for the page to show, you must contain content into containers like this:
<body>
<div data-role='page'>
<div data-role='header'>
Header goes here
</div>
<div data-role='content'>
Content goes here
</div>
</div>
</body>

Categories