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...

Load the CSS file into the Page
https://raw.github.com/ujifgc/pagedown/master/demo/browser/demo.css
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
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

回答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:

create a folder
in that folder, place the files you'd like to load in the browser
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).
In Chrome, install the local extension
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?

来源：https://stackoverflow.com/questions/10544597/include-external-javascript-and-css-files-into-another-sites-dom

标签

javascript

bookmarklet