Chrome Extension Manifest permissions

Question

This is my first chrome Extension.

I basically have already written a html file that has a javascript file to go along with it. I've noticed that apparently you have to put the javascript as a separate file to the html file. That's fine. Did that. Referenced it in the html header.

But I'm not sure how to setup the manifest file to be able to use the javascript on my popup html page.

the javascript does not use jquery. it's pure javascript.

I'm not sure what Required or Optional Permissions I have to include in the manifest if any. So far all I know is that I might have to include "clipboardRead" permission in there.

Or am I meant to be using content_scripts instead in the manifest.

this is my manifest.

{
  "manifest_version": 2,

  "name": "PhotoTagger",
  "description": "This extension helps you create your hashtags for your posts, quickly.",
  "version": "1.0",

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["PhotoTagger.js"]
    }
  ],

  "permissions": [
    "clipboardRead",
  ],

  "browser_action": {
    "default_icon": "icons/Google-plus-19x19.png",
    "default_popup": "PhotoTagger.html"
  }
}

and a sample function in my javascript is this (PhotoTagger.js):

function selectText(containerid) {
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(containerid));
        range.select();
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(containerid));
        window.getSelection().addRange(range);
    }
}

and this is a sample snippet of my html calling the Js function:

<li id="#Sydney" onclick="selectText('#Sydney')">
    <input id="al2" type="checkbox" value="#Sydney +104262770460851770269"/>
    #Sydney</li>

really appreciate any help I can get.

Also to mention the html works fine on an opened tab in chrome. just doesn't work when I run it as an extension.

Answer 1

I've just begun using ChromeExtensions, so this might not be a complete answer, but here are some issues I see:

1. content_scripts are injected into the page and have access to the webpage's dom, but not it's JS
2. popups live in their own sandbox and have access only to what's in that sandbox
3. webpages cannot access JS in either the content_scripts or the popups

PhotoTagger.html should be able to interact with its own JS, just by putting in a "script" tag referencing PhotoTagger.js. There are no permissions needed for that. So if your snippet is in PhotoTagger.html and there's a "script" reference to PhotoTagger.js in PhotoTagger.html, then you should be fine (and you can get rid of the whole content_scripts section). If you're doing this and it doesn't work, you might need to link more of the code.

However, if you're loading a webpage with that html snippet on it, it won't work. The webpage does not have access to JS in the content_scripts or in the popup (I'm still looking for a workaround for this, but it's blocked because of security issues).