title: Chrome extension - generate keypress
body: <p>I'm trying to write a chrome extension that generates simulated keyboard events. </p>
  
  <p><a href="https://stackoverflow.com/questions/13987380/how-to-to-initialize-keyboard-event-with-given-char-keycode-in-a-chrome-extensio">This question explains how to generate the keyboard event</a>, but when I run it on my content script it generates the following error:</p>
  
  <pre><code>error: Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".
  </code></pre>
  
  <p>What do I do to fix this?</p>
  
  <p>Here's my manifest.xml</p>
  
  <pre><code>{
    "name": "2048 forever",
    "description": "SOLVES EVERYTHING",
    "version": "2.0",
    "permissions": [
      "activeTab"
    ],
    "web_accessible_resources": ["keyboard.js"],
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "browser_action": {
      "default_title": "Solve the things"
    },
    "manifest_version": 2
  }
  </code></pre>
  
  <p>background.js contains:</p>
  
  <pre><code>chrome.browserAction.onClicked.addListener(function(tab) {
      console.log('Turning ' + tab.url + ' red!');
  
      chrome.tabs.executeScript({
          code: 'document.body.style.backgroundColor="red"'
      });
  
      triggerKeyEvent(document.body, 38);
  });
  
  
  function triggerKeyEvent(element, charCode) {
      // We cannot pass object references, so generate an unique selector
      var attribute = 'robw_' + Date.now();
      element.setAttribute(attribute, '');
      var selector = element.tagName + '[' + attribute + ']';
  
      var s = document.createElement('script');
      s.textContent = '(' + function(charCode, attribute, selector) {
          // Get reference to element...
          var element = document.querySelector(selector);
          element.removeAttribute(attribute);
  
          // Create KeyboardEvent instance
          var event = document.createEvent('KeyboardEvents');
          event.initKeyboardEvent(
              /* type         */ 'keydown',
              /* bubbles      */ true,
              /* cancelable   */ false,
              /* view         */ window,
              /* keyIdentifier*/ '',
              /* keyLocation  */ 0,
              /* ctrlKey      */ false,
              /* altKey       */ false,
              /* shiftKey     */ false,
              /* metaKey      */ false,
              /* altGraphKey  */ false
          );
          // Define custom values
          // This part requires the script to be run in the page's context
          var getterCode = {get: function() {return charCode}};
          var getterChar = {get: function() {return String.fromCharCode(charCode)}};
          Object.defineProperties(event, {
              charCode: getterCode,
              which: getterChar,
              keyCode: getterCode, // Not fully correct
              key: getterChar,     // Not fully correct
              char: getterChar
          });
  
          element.dispatchEvent(event);
      } + ')(' + charCode + ', "' + attribute + '", "' + selector + '")';
  
      console.log('text content: ' + s.textContent);
  
      (document.head||doc.documentElement).appendChild(s);
      s.parentNode.removeChild(s);
  }
  </code></pre>