{jpm}如何将任何页面替换为自己的页面?
问题描述:
如何将任何页面(例如http://google.com/)替换为我的页面(我不想重定向),包括<head>
?{jpm}如何将任何页面替换为自己的页面?
我尝试这样做:
// Import the page-mod API
var pageMod = require("sdk/page-mod");
// Create a page-mod
// It will run a script whenever a ".io" URL is loaded
// The script replaces the page contents with a message
pageMod.PageMod({
include: "*.io",
contentScript: 'document.body.innerHTML = ' +
' "<h1>Page matches ruleset</h1>";'
});
但这并不能代替整个页面。我也想替换head
。我想在页面加载之前替换页面...
答
使用document.head.innerHTML
您可以参考html页面的标题,从而可以在其中设置内容。
另外值得注意的是,page-mod API可以采用multiple arguments as an array of string literals,并且可以从数据目录中导入脚本。
最后,您可以设置脚本的页面之前运行已经由page-mod OptioncontentScriptWhen
设置的start
或ready
值加载。
按照文档:
“开始”:文档元素 插入后立即到DOM,但本身已经 加载
“准备的DOM内容前加载内容的脚本“:一旦DOM内容被加载,加载内容脚本 对应于DOMContentLoaded事件
”end“:加载内容脚本一旦所有内容(DOM,JS,CSS, 个图像)已被加载,在当时的window.onload事件触发
所以你的页面加载将类似于以下之前,改变两者的标题和正文例如:
// Import the page-mod API
var pageMod = require("sdk/page-mod");
// Create a page-mod
// It will run a script whenever a ".org" URL is loaded
// The script replaces the page contents with a message
pageMod.PageMod({
include: "*.io",
contentScript: ['document.body.innerHTML = ' +
' "<h1>foo</h1>"',
'document.head.innerHTML = ' +
' "<style>h1 {color:blue;}</style>";'],
contentScriptWhen: "start"
});
还值得注意的是,当contentScriptWhen
设置为ready
时,此脚本可能对某些页面更好,否则这些更改可能不适用于页面上的所有元素。
如何在页面加载之前执行它? –
刚刚编辑了更新的答案。对于那个很抱歉。 – Diggzy