2

I'm developing a chrome extension where I can insert text inside github web editor. The inserted text should be at the caret position, which I can't figure out how get it.

enter image description here

The github editor, which is an ace editor, has this HTML code:

<div class="commit-create">
<textarea id="blob_contents"
      class="file-editor-textarea js-blob-contents js-code-textarea"
      rows="35" name="value"
      data-filename="README.md"
      data-language="Markdown"
      data-ace-mode="markdown"
      data-allow-unchanged=""
      data-test-id="blob-file-editor"
      placeholder="Enter file contents here"
      spellcheck="false"
      autofocus>
Line 1
Line 2
Line 3
Line 4
</textarea>
</div>

In my manifest.json, I included ace.js (obtained from here, I hope it's the correct .js file)

...    
"content_scripts": 
      [{
        "matches": ["*://*.github.com/*/edit/*"],
        "js":      ["ace.js", "content.js"]
      }],
...

here's the javascript code provided by a user:

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) 
{
    ...
    var editor = document.querySelector(".ace_editor").env.editor;
    var cursor = editor.selection.getCursor() // returns object like {row:1 , column: 4}
    editor.insert("text") // insert string at cursor
    ...
}

I get this error

Error in event handler for runtime.onMessage: TypeError: Cannot read property 'editor' of undefined

=== edit 1 ====

Thanks to a user I did a little bit progress. The code works on chrome console, but it doesn't work on content.js, it might be a security issue which I don't understand why.

azer89
  • 1,529
  • 1
  • 15
  • 29
  • 1
    use the ACE API to set the position and inject text. the editor is not really a textarea, so textarea methods won't work at all. – dandavis Mar 15 '15 at 23:35
  • Thanks for your comment, have been struggling with ACE API for an hour with no luck – azer89 Mar 16 '15 at 00:46

3 Answers3

5

you need to use ace api for it

var editor = document.querySelector(".ace_editor").env.editor;
var cursor = editor.selection.getCursor() // returns object like {row:1 , column: 4}
editor.insert("text") // insert string at cursor
a user
  • 23,300
  • 6
  • 58
  • 90
  • thanks for your comment, can you read my edit #2? I have a problem getting the current cursor position – azer89 Mar 16 '15 at 01:09
  • you are creating a new editor, use the method i show in the answer instead of ace.edit – a user Mar 16 '15 at 01:14
  • ah you're correct, but I get TypeError: Cannot read property 'env' of null – azer89 Mar 16 '15 at 01:19
  • try without commit-create, I included it to make selector more specific, but probably it depends on page – a user Mar 16 '15 at 01:41
  • I tried .ace_editor .commit-create .file-editor-textarea .js-blob-contents .js-code-textarea, all of them don't work – azer89 Mar 16 '15 at 01:52
  • that may be security setting of chrome not allowing your extension to access js from the page. Try running same code in the console to check. – a user Mar 16 '15 at 01:56
  • yeah, magic happens, The code works on console, but I have no Idea how to deal with chrome extension security – azer89 Mar 16 '15 at 02:00
1

thanks for a user who guided me to the solution, Here's what I did:

Use ace API, download the js file: https://github.com/ajaxorg/ace-builds/blob/master/src/ace.js

The manifest.json:

  "content_scripts": 
  [{
    "matches": ["*://*.github.com/*/edit/*"],
    "js":      ["ace.js", "jquery.js", "content.js"]
  }],

Because of security issue, I can't retrieve the ace editor object directly, so I need to inject this script: 

function InsertToAceEditor(message)
{
    var scriptContent = "document.querySelector('.ace_editor').env.editor.insert('" +  message+ " ')";
    var script = document.createElement('script');
    script.id = 'tmpScript';
    script.appendChild(document.createTextNode(scriptContent));
    document.body.appendChild(script);
    $("#tmpScript").remove();
}

As pointed by a user, here's the explanation: https://stackoverflow.com/a/24344154/1743328

Community
  • 1
  • 1
azer89
  • 1,529
  • 1
  • 15
  • 29
0

This no longer work due to Security Policy directive 'unsafe-inline' manifest v3

Chai Jian Wei
  • 1