0

I am trying to load a Markdown editor like the one StackExchange uses on it's site into the Forrst.com site with a Bookmarklet or Browser Extension.

Basically it looks like I need...

  1. Load the CSS file into the Page
    https://raw.github.com/ujifgc/pagedown/master/demo/browser/demo.css

  2. Load these 3 Javascript files into the page

    https://raw.github.com/ujifgc/pagedown/master/Markdown.Converter.js
    https://raw.github.com/ujifgc/pagedown/master/Markdown.Editor.js
    https://raw.github.com/ujifgc/pagedown/master/Markdown.Sanitizer.js

  3. Load this Javascript into the page to make it all run... 

//Load and run this code in the page...
// Find and replace the curent textarea with the HTML we
// need for our markdown editor to work 
var htmlToReplace = ' \
  <div class="wmd-panel"> \
    <div id="wmd-button-bar"></div> \
      <textarea class="wmd-input" id="wmd-input" name="description"></textarea> \
  </div> \
  <div id="wmd-preview" class="wmd-panel wmd-preview"></div>';

$("#description").replaceWith(htmlToReplace)

//Run the markdown editor scripts
(function () {
    var converter1 = Markdown.getSanitizingConverter();
    var editor1 = new Markdown.Editor(converter1);
    editor1.run();
})();

If anyone could point me in the right direction on how to accomplish something like this, I believe it's possible I would really appreciate the help

CodeDevelopr
  • 1,267
  • 3
  • 17
  • 30
  • What have you researched or tried with a browser extension? – jfriend00 May 11 '12 at 02:42
  • @jfriend00 So far I think I have figured out all the appropriate javascript to make it work, it's just a matter of getting all my JS files included into the page – CodeDevelopr May 11 '12 at 02:46
  • Like I said, when you looked into how a browser extension works, what specific questions did you have about it? We aren't meant to be your researcher. You do the research, see what's documented about how browser extensions work and, if you can't figure that out, you ask a more specific question based on what you learned. – jfriend00 May 11 '12 at 02:54
  • What browser are you looking to make an extension for? – Connor May 11 '12 at 02:56
  • @jfriend I'm sorry but the question at stake was how to load Javascript file into an external site regardless of an extension or not, I know this is possible with a bookmarklet as well, I am still in the process of researching everything and this question is part of that – CodeDevelopr May 11 '12 at 03:01
  • @Connor Montgomery if I go the browser exntension route I would likely do it with Chrome and Firefox, right now I am just trying to find out mainly how I can load these files into another website – CodeDevelopr May 11 '12 at 03:03

1 Answers1

1

If you'd like to load them into a different website, Chrome gives you a very easy way to do so, and they are called Content Scripts.

Essentially, you create an extension, and in your manifest.json file, you specify the javascript files you'd like to load, giving relative paths to where they are in your project's directory.

So, here are the steps:

  1. create a folder
  2. in that folder, place the files you'd like to load in the browser
  3. create a manifest.json file, and in there, specify the CSS and JavaScript files you'd like to load in (and give their relative paths to the manifest file).
  4. In Chrome, install the local extension
  5. Keep on testing, and whenever you make a change to a file, make sure you click "reload extension" on the page you installed it at (chrome://extensions), so it reloads the files and restarts itself.

Does that answer at least part of your question?

Connor
  • 4,138
  • 8
  • 34
  • 51