Include external Javascript and CSS files into another site's DOM

Question

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

Answer 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?