Javascript Chrome扩展内容脚本不起作用-元素不';t出口或温度-未定义
我不熟悉Chrome扩展。我想创建一个简单的chrome扩展,弹出一个警报,并从源页面web播放器中删除广告 我试图让我的Chrome扩展读取当前页面源代码,并在内容重新加载时从页面中删除广告,它会自动删除这些广告 但当我试图用下图所示的代码创建扩展时,它不起作用 但是,当我在浏览器的控制台上简单地使用该脚本并从网络播放器中删除这些广告时,它就会起作用: 清单文件:Javascript Chrome扩展内容脚本不起作用-元素不';t出口或温度-未定义,javascript,performance,google-chrome-extension,dom-events,extension-methods,Javascript,Performance,Google Chrome Extension,Dom Events,Extension Methods,我不熟悉Chrome扩展。我想创建一个简单的chrome扩展,弹出一个警报,并从源页面web播放器中删除广告 我试图让我的Chrome扩展读取当前页面源代码,并在内容重新加载时从页面中删除广告,它会自动删除这些广告 但当我试图用下图所示的代码创建扩展时,它不起作用 但是,当我在浏览器的控制台上简单地使用该脚本并从网络播放器中删除这些广告时,它就会起作用: 清单文件: "browser_action" : {
"browser_action" : {
"default_icon" : "icon.png",
"default_popup" : "popup.html"
},
"content_scripts" : [
{
"matches" : ["https://www.*any.com/videos/*"],
"js" : [ "content.js"]
}
内容文件数据
alert("Hello from your Chrome extension!");
console.log("1 Chrome extension go D4d");
function timedText() {
setTimeout(myTimeout, 1000)
console.log("3 Chrome extension go D4d cue-poin set timeout");
}
function myTimeout() {
console.log("4 Chrome extension go D4d cue-poin insert");
var v = document.getElementsByClassName("cue-point");
while (v.length >0) v[0].remove();
console.log("5 Chrome extension go D4d cue-point exit");
}
function func()
{
var t = document.getElementById("html5_player_id_html5-container");
if(typeof(t) != 'undefined' && t != null)
{
console.log("2 Chrome extension go D4d html5 exit");
t.classList.remove("html5_player_id_html5-container");
timedText();
alert('Element exists!');
}
else{
func();
alert('Element does not exist!');
}
}
window.onload=func;
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('btn_click_id');
// onClick's logic below:
link.addEventListener('click', function() {
alert("Button click " + link );
myFunction();
});
});
HTML文件
<!DOCTYPE html>
<html>
<head>
<title>D4d Launcher</title>
<link rel="stylesheet" href="goog letets.css">
<link
href="https://fonts.googleapis.com/css?family=Open+Sans"
rel="stylesheet"
type="text/css"/>
<link
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet" />
<style>
/* Modal Structure */
html,
body {
font-family: "Open Sans", sans-serif;
font-size: 14px;
margin: 0;
min-height: 180px;
padding: 0;
width: 260px;
}
h1 {
font-family: "Menlo", monospace;
font-size: 22px;
font-weight: 400;
margin: 0;
color: #2f5876;
}
a: link,
a:visited {
color: #000000;
outline: 0;
text-decoration: none;
}
img {
width: 10%;
}
.modal-header {
align-items: center;
border-bottom: 0.5px solid #dadada;
}
.modal-content {
padding: 0 22px;
}
.modal-icons {
border-top: 0.5px solid #dadada;
height: 50px;
width: 100%;
}
.logo {
padding: 16px;
}
.logo-icon {
vertical-align: text-bottom;
margin-right: 4px;
}
.version {
color: #444;
font-size: 18px;
}
.flex-container {
display: flex;
justify-content: space-between;
padding: 10px 22px;
}
.flex {
opacity: 1;
transition: opacity 0.2s ease-in-out;
width: 80px;
}
.flex:hover {
opacity: 0.4;
}
.flex .fa {
font-size: 30px;
color: #2f5876;
}
.separator {
width: 100%;
border-top: 2px groove white;
margin: 5px -5px 5px -3px;
}
#titletext {
padding: 8px 8px 2px 0px;
text-align: center;
}
</style>
</head>
<body >
<div class="modal-header">
<h1 id="#titletext" class="logo">
<!-- <img class="mainlogo-icon" src="images/iconsd4d.png " /> -->
<img class="logo-icon" src="images/icons.png " /><b> Viki</b> Ads
<span class="version">(1.0.0)</span>
</h1>
</div>
<div class="modal-content">
<p>If you've DANCE content would like to share, just send a DM/TAG US on instagram <b>@dance4dancerss</b> & we post it.
Featuring dancers from around the world <i class="fa fa-globe" style="color:rgb(248, 75, 44) "></i> </p>
</div>
<div class="modal-icons">
<div class="flex-container">
<!-- <div class="flex">
<a href="https://www.traversymedia.com" target="_blank">
<i class="fa fa-globe" style="color:darksalmon "></i>
</a>
</div> -->
<div class="flex">
<a href="https://www.youtube.com/watch?v=q_WvEJntnJM" target="_blank">
<i class="fa fa-youtube" style="color:rgb(248, 75, 44) "></i>
</a>
</div>
<div class="flex">
<a href="https://www.twitter.com/dance4dancers" target="_blank">
<i class="fa fa-twitter" style="color:rgb(248, 75, 44) "></i>
</a>
</div>
<div class="flex">
<a href="https://www.instagram.com/dance4dancerss" target="_blank">
<i class="fa fa-instagram" style="color:rgb(248, 75, 44) "></i>
</a>
</div>
<div class="flex">
<a href="https://facebook.com/dance4dancers" target="_blank">
<i class="fa fa-facebook" style="color:rgb(248, 75, 44) "></i>
</a>
</div>
</div>
<div></div>
<div id="separator0" class="modal-header">
</div>
<button class="btn_click" id="btn_click_id"> AD </button>
</div>
</div>
<script type="text/javascript" src="content.js"></script>
</body>
</html>
D4d发射器
/*模态结构*/
html,
身体{
字体系列:“开放式Sans”,无衬线;
字体大小:14px;
保证金:0;
最小高度:180px;
填充:0;
宽度:260px;
}
h1{
字体系列:“Menlo”,monospace;
字体大小:22px;
字体大小:400;
保证金:0;
颜色:#2f5876;
}
答:林克,
a:参观了{
颜色:#000000;
大纲:0;
文字装饰:无;
}
img{
宽度:10%;
}
.模态标题{
对齐项目:居中;
边框底部:0.5px实心#dadada;
}
.模态内容{
填充:0 22px;
}
.模态图标{
边框顶部:0.5px实心#达达;
高度:50px;
宽度:100%;
}
.标志{
填充:16px;
}
.标志图标{
垂直对齐:文本底部;
保证金权利:4px;
}
.版本{
颜色:#444;
字号:18px;
}
.柔性容器{
显示器:flex;
证明内容:之间的空间;
填充:10px 22px;
}
.flex{
不透明度:1;
过渡:不透明度0.2s缓进缓出;
宽度:80px;
}
.flex:悬停{
不透明度:0.4;
}
.flex.fa{
字体大小:30px;
颜色:#2f5876;
}
.分离器{
宽度:100%;
边框顶部:2个白色凹槽;
保证金:5px-5px 5px-3px;
}
#标题文本{
填充:8px 8px 2px 0px;
文本对齐:居中;
}
维基广告
(1.0.0)
如果你想分享舞蹈内容,只需在instagram@dance4dancerss上发送DM/TAG给我们,我们会发布它。
以来自世界各地的舞者为特色
公元
请帮我解决问题。谢谢你纠正我的错误。