Chrome扩展程序可移除iframe内的DOM元素 [英] Chrome extension to remove DOM elements inside iframes
问题描述
我想知道创建Google Chrome扩展程序所需的所有组件和步骤，这些扩展程序可以从某个页面内的iframe中删除一些DOM元素。
我的研究表明，由于相同的出处政策，通过JavaScript无法实现此功能。
在Chrome中手动删除代码检查中的DOM元素，我得到了，但我想自动化这一点。
从其他类似的问题（主要是这一个），看来一个Chrome扩展应该能够做到这一点。
我相信这个是最类似的问题，但还没有我还没有回答，也没有那么清楚。
诚实地说，我可以从这里拿走它，但我认为其他人可能会从这个问题中受益，答案，即使我最终回答自己。
HTML示例：
<！DOCTYPE html>
< html>
< body>
< iframe src =iframe.htm>< / iframe>
< / body>
< / html>
和 iframe.htm ：
<！DOCTYPE html>
< html>
< body>
< div id =targetDiv>< / div>
< / body>
< / html>
最终结果应该与运行（使用jQuery）相同：
$（'＃targetDiv'）。remove（）;
这当然不起作用。
我完成了我想要的所以这里是答案。
Chrome扩展程序需要的第一件事是清单文件的manifest.json 。
下面是一个工作示例：
{
manifest_version：2，
name：iframe操作扩展示例，
description：该扩展允许运行处理跨域IFRAME内容的脚本。，
version：1.0，
permissions：[
*：//target-site.com/*
]，
content_scripts：[
{
matches：[
*：//target-site.com/*
]，
js：[script.js]，
all_frames：true
}
]
}
它有一些不言自明的值，然后是权限和 content_scripts 。
它基本上说这个扩展只在访问target-site.com时才起作用。
我们指定要运行的文件，并设置all_frames：true ，它将为页面中的每一帧运行该文件。
当然，您可以在清单中引用的文件中运行所需的任何javascript。
导航到 chrome：// extensions / 来加载你的解压缩后的扩展名或者打包它。
请注意，还有其他方法可以获得扩展来运行脚本。这正是我最简单的方式。
I would like to know all the components and steps needed to create a Google Chrome extension that will be able to remove some DOM elements from inside an iframe within a certain page.
My research indicates that this is not possible through common javascript due to the same origin policy.
Manually removing the DOM elements from code inspection in Chrome is as far as I got, but I want to automate this.
From other similar questions (mainly this one), it appears that a Chrome extension should be able to do this. I believe this is the most similar question but has not been answered as of yet, and also isn't as clear.
In all honesty, I could take it from here, but I think other people might benefit from this question and the answer, even if I end up answering myself.
Example HTML:
<!DOCTYPE html>
<html>
<body>
<iframe src="iframe.htm"></iframe>
</body>
</html>
And iframe.htm:
<!DOCTYPE html>
<html>
<body>
<div id="targetDiv"></div>
</body>
</html>
The end result should be the same as running (with jQuery):
$('#targetDiv').remove();
which of course does not work.
I accomplished what I wanted so here's the answer.
The first thing you need for Chrome extensions is the manifest file, manifest.json.
Here is a working example:
{
"manifest_version": 2,
"name": "iframe manipulation extension example",
"description": "This extension allows to run scripts that manipulate cross domain IFRAME contents.",
"version": "1.0",
"permissions": [
"*://target-site.com/*"
],
"content_scripts": [
{
"matches": [
"*://target-site.com/*"
],
"js": ["script.js"],
"all_frames": true
}
]
}
It has some self-explanatory values and then permissions and content_scripts.
It basically says that this extension will only work when accessing target-site.com.
We specify the file we want to run and also set "all_frames": true, which will run said file for each frame in the page.
You can of course run whatever javascript you need in the file/s you reference in your manifest.
Navigate to chrome://extensions/ to load your unpacked extension or pack it.
Please note there are other ways to get an extension to run scripts. This is just what I ended up with as the easiest way.
这篇关于Chrome扩展程序可移除iframe内的DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
