CODEWITHSUNDEEP
firefoxfirefox-addonfirefox-addon-sdk
penu
penu

Reputation: 1030

Getting html of current page

I'm creating a Firefox addon using jetpack (jpm with node.js) to extend the Firefox developer tools to allow editing the current page's html. (I know this feature already exists; just trying to learn the ropes).

What API do I use to access the current page's HTML? I see that there is a Debugger.Source but I'm not sure if this is correct. If so, how do I retrieve this data?

Upvotes: 0

Views: 96

Answers (2)

therealjeffg
therealjeffg

Reputation: 5830

As the first answer suggests, you can get at the html source using a content script injected the page. For example, here's a very simple approach that uses the tabs module to attach a content script into the current page:

const self = require('sdk/self');
const tabs = require('sdk/tabs');

let { ActionButton } = require("sdk/ui/button/action");

let button = ActionButton({
  id: "my-button-id",
  label: "Get HTML Source",
  icon: {
    "16": "chrome://mozapps/skin/extensions/extensionGeneric.png",
    "32": "chrome://mozapps/skin/extensions/extensionGeneric.png"
  },
  onClick: (state) => {
    let worker = tabs.activeTab.attach({
      contentScript: 'self.port.emit("htmlSrc", {head: document.head.outerHTML, body: document.body.outerHTML});'
    });
    worker.port.on('htmlSrc', (result) => {
      worker.destroy(); // clean up
      let src = "<html>\n"+ result.head + "\n" + result.body + "\n</html>";
      require('sdk/clipboard').set(src, 'text');
    });
  }
});

Upvotes: 1

Basilevs
Basilevs

Reputation: 23916

Direct access via SDK is impossible, but you can use content scripts to read and modify the page.

Upvotes: 1

Related Questions