CODEWITHSUNDEEP
javascriptbookmarklet
CodeDevelopr
CodeDevelopr

Reputation: 1265

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

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

Upvotes: 0

Views: 501

Answers (1)

Connor
Connor

Reputation: 4168

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?

Upvotes: 1

Related Questions