Skip to content

1. Development workflow

Jump to bottom
Hugo Alliaume edited this page Oct 23, 2018 · 3 revisions

Watching mode and Hot Module Reload

$ npm run watch:dev

# for yarn:
$ yarn watch:dev

Note: Hot Module Reload only works for your background entry, at the moment, it is not possible to use it for your popup/options pages.

Using Vue Devtools on your popup

By default, you can't use Vue Devtools on your popup page because of some reason.

@wujunchuan found a solution to make it works anyway.

Install and run Vue Devtools

Run npm i -g @vue/devtools, then run vue-devtools.

Configuring your extension

A new window opens, copy the first <script> (it should be something like <script src="http://localhost:8098"></script>).

Updating your .html

Then update your src/popup/popup.html like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="popup.css">
+ <% if (NODE_ENV === 'development') { %>
+   <!-- Load Vue Devtools remote ONLY in development -->
+   <script src="http://localhost:8098"></script>
+ <% } %>
</head>
...

Note: Since #336, it is now possible to use EJS on HTML files. Also it automatically inject all environment variables (from process.env).

Updating Content Security Policy

You also need to update Content Security Policy of your extension. For this, update your webpack.config.js by adding http://localhost:8098 in manifest.json's content_security_policy:

{
  from: 'manifest.json',
  to: 'manifest.json',
  transform: (content) => {
    const jsonContent = JSON.parse(content);
    jsonContent.version = version;

    if (config.mode === 'development') {
-      jsonContent['content_security_policy'] = "script-src 'self' 'unsafe-eval'; object-src 'self'";
+      jsonContent['content_security_policy'] = "script-src 'self' 'unsafe-eval' http://localhost:8098; object-src 'self'";
    }

    return JSON.stringify(jsonContent, null, 2);
},

Note: you should restart webpack to apply modification.

Note 2: you should disable and re-enable your extension in Chrome, to take care of manifest.json changes.

Opening your popup

After that, you can open your popup and normally you will see a message like Connected to Vue.js devtools.

To make your development easier, you can open your popup in a new tab: chrome-extension://<extension id>/popup/popup.html

Clone this wiki locally