CODEWITHSUNDEEP
javascripthtmlgoogle-chromehttpgoogle-chrome-extension
NanoPortal
NanoPortal

Reputation: 35

chrome extension: html has external javascript

I'm new to building chrome extensions, and I have this problem.

Background:
I have to write Pinyin, but unfortunately Microsoft Word, Google Docs, and Apple Pages don't offer a convenient way to write Pinyin tone accents. I constantly have to switch back and forth between Google Docs and an online Pinyin editor, http://www.chinese-tools.com/tools/pinyin-editor.html. I wanted to build a Chrome extension so I won't have to switch between tabs, but I ran into a problem.

Problem:
On my popup.html, I have a <script></script> that grabs the JavaScript file from http://www.chinese-tools.com. I can't download it and use it as a local file because the script doesn't perform correctly if I do. When I tested out the popup.html as a localhost website, it worked perfectly. But, the script doesn't load on the Chrome extension.

Manifest:

{

  "name": "Pinyin Editor",
  "description": "A built-in Pinyin Editor so you don't have to go to chinese-tools.com.",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title": "A built-in Pinyin Editor."
  },

  "manifest_version": 2
}

popup.html:

<!DOCTYPE html>
<html>
<head>
    <script language="JavaScript1.2" src="http://www.chinese-tools.com/jdd/public/documents/js/carch.js"></script>
</head>
<body>
    <form name="conversion" id="conversion">
            <textarea name="saisie" id="saisie" cols="80" rows="5" class="ctpinyintextarea" onkeyup="transcrire()" /></textarea>
            <br />
    </form>
</body>
</html>

The problem is that the <script language="JavaScript1.2" src="http://www.chinese-tools.com/jdd/public/documents/js/carch.js"></script> on the popup.html is refusing to load on the Chrome extension. I feel like content_scripts or background scripts on the manifest might work, but I don't know how to incorporate it.

Upvotes: 1

Views: 519

Answers (2)

Xan
Xan

Reputation: 77531

You cannot simply include an external script file in your extension pages. This would violate the default Content Security Policy.

For a script served over https, it's possible to relax the policy; but http origins are forbidden for security reasons: it's too easy to intercept the request and inject malicious code.

That said, this particular script will work just fine if included locally. Say, save it to a file carch.js in the extension folder, and include it with src="carch.js".

What doesn't work then is inline code, namely onkeyup="transcrire()" in your HTML, as noted by xMort. It is also a violation of CSP that cannot be relaxed.

Instead, you have to remove it and add this to carch.js:

// Wait until DOM is ready and element exists
document.addEventListener("DOMContentLoaded", function(event) {
  // Attach the listener
  document.getElementById("saisie").addEventListener("keyup", transcrire);
});

In future, to help you debug problems with your popup, take a look at this Debugging Tutorial.

Upvotes: 1

xMort
xMort

Reputation: 1735

Download the script to your computer and pack it to the extension zip. You should be than able to allow it via content security policy in extension's manifest.

Also you need to move all your scripts to external ".js" file and do all event handling and binding from there. You can not have "onkeyup" and other event handlers inlined in the HTML code.

"content_security_policy": "script-src 'self'"

Upvotes: 0

Related Questions