Using Dart for Chrome Extensions

Question

I'm trying to create a Chrome extension using Dart.

As of now I can't get it to run any javascript in the extension, although I can do pub build and run it in a browser.

I have the following 3 files:

Manifest.json:

{
  "manifest_version": 2,

  "name": "ecDownloader",
  "description": "-",
  "version": "0.1",

  "browser_action": {
    "default_title": "Click to disable extension",
    "default_icon": "images/icon.png"
  },

  "options_page" : "options.html"
}

options.html:

<html>
  <head>
    <meta charset="utf-8">
    <title>ecDownloader</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div>
      <h1>Options</h1>
      <fieldset name="info">
        <legend>Login Information</legend>
        <label for="username">Username</label>
        <input type="text" name="username" id="username" size="20">
        <label for="password">Password</label>
        <input type="password" name="password" id="password" size="20">
        <button type="button">Save!</button>
      </fieldset>
      <span id="test"></span>
    </div>
    <script type="application/dart" src="options.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

options.dart:

import 'dart:html';

void main() {
  querySelector('#test').text = 'test';
}

Something along the line; "What am I doing wrong here?", or "What am I missing?". — Mikael, Mar 03 '14 at 19:47
I can't get it to run any javascript after adding my "project" as unpacked extension in Chrome. Even though I can run my project in Dart Editor using both 'Run in Dartium', or do a pub build and 'Run in Browser'. — Mikael, Mar 03 '14 at 19:54
So in your question you mean 'although I can**'t** do pub' instead of 'although I can do pub'? Any error messages? — Günter Zöchbauer, Mar 03 '14 at 19:56
Ok, now I've got the following 2 messages: "Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:"." "Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:"." — Mikael, Mar 03 '14 at 20:01
I haven't done it myself yet but what I have heard you have to replace the script reference in your HTML file so it uses the one which contains 'precompiled' in it's name (should in the build output directory). And I think you have to copy the build output to the 'app' directory (maybe not the HTML file because there is already one in 'app'). — Günter Zöchbauer, Mar 03 '14 at 20:05
see also https://code.google.com/p/dart/issues/detail?id=13891, https://code.google.com/p/dart/issues/detail?id=13525, https://code.google.com/p/dart/issues/detail?id=17068 — Günter Zöchbauer, Mar 03 '14 at 20:07
What exactly did the trick? Change script file and copy to app? Or only one of those? — Günter Zöchbauer, Mar 03 '14 at 20:13

Günter Zöchbauer · Accepted Answer · 2014-03-05T05:09:33.163

A Chrome extension needs to use the CSP compliant script. The CSP compliant scripts are automatically generated by pub build with the extension dart.precompiled.js but the HTML file references the non-CSP compliant file by default.

There are plans that a configuration option of the Dart2JS transformer should set the link to the appropriate script file, but this is not yet implemented.

There is also an option csp: true for the Polymer transformer which must be set when Polymer is used.

EDIT

A transformer was added to chrome.dart which does this automatically on pub build - will be available soon.

Using Dart for Chrome Extensions

1 Answers1