我正在构建Chrome扩展程序。它的弹出窗口中有一个徽标横幅,我想将其用作扩展程序的暂停/激活按钮。此横幅的背景颜色指示该扩展名当前是否处于活动状态。
横幅是一个ID为“ pophead”的div,我要在其上放置3个事件监听器。
问题: 我不能让三个人一起工作。单独或一次2个都可以正常工作,回调可以完成他们需要做的事,但是当所有3个都应用时...
我不知所措...感谢您的帮助!
popup.html
@include('layouts.students.header')
<meta name="csrf-token" content="{{csrf_token()}}">
<body>
<div class="col">
<p class="text-right" style="font-size: 18px;">
<i class="fa fa-rupee"></i><strong
class="amount">299</strong>
</p>
</div>
<div class="form-group text-right">
<button class="btn btn-warning btn-block btn-lg
buy_now">Proceed</button>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('button').click(function(event){
e.preventDefault();
var amount = $('.amount').html();
$.ajax({
url : '{{route('razorpay')}}',
method : 'POST',
dataType : 'jason',
data : {amount :amount * 100},
success : function (Response) {
console.log(Response);
}
});
});
});
</script>
</body>
</html>
controller :
public function dopayment(Request $request)
{
$data = $request->all();
$result = Payment::insert($data);
echo "inserted";
}
popup.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PopUp</title>
<link rel="stylesheet" href="popup2.css">
</head>
<body>
<div id="pophead">
<div><img src="imgs/Eclipser_logo.png" id="logo" class="shadow"></div>
<div id="tagline" class="shadow"> FOCUS IS A SUPERPOWER! </div>
</div>
<script src="popup.js" charset="utf-8"></script>
</body>
</html>
popup.css
document.addEventListener('DOMContentLoaded', function () {
//Eclipser active?
let active; // stores if Eclipser is currently active
chrome.storage.sync.get('eclipser_all', function (result) {
active = result.eclipser_all;
});
// Pophead versions
let pophead_active = `
<div><img src="imgs/Eclipser_logo.png" id="logo" class="shadow"></div>
<div id="tagline" class="shadow"> FOCUS IS A SUPERPOWER! </div>
`
let pophead_passive = `
<div><img src="imgs/Eclipser_logo.png" id="logo" class="shadow"></div>
<div id="tagline" class="shadow"> PAUSED </div>
`
let pophead_pause = `
<div><img src="imgs/pause.png" id="logo" class="shadow"></div>
<div id="tagline" class="shadow"> PAUSE </div>
`
let pophead_activate = `
<div><img src="imgs/play.png" id="logo" class="shadow"></div>
<div id="tagline" class="shadow"> ACTIVATE! </div>
`
// Pophead events
const pophead = document.getElementById('pophead');
setPophead(); // display correct pophead on load
pophead.addEventListener('mouseover', () => {
if(active){
pophead.innerHTML=pophead_pause;
pophead.style.backgroundColor='var(--dark_green)'
}else if(!active){
pophead.innerHTML=pophead_activate;
}
});
pophead.addEventListener('mouseleave', setPophead);
pophead.addEventListener('click',() => {
alert('clicked');
chrome.storage.sync.get('eclipser_all', function (result) {
if(result.eclipser_all == false){
chrome.storage.sync.set({ 'eclipser_all': true }, ()=>setPophead);
active=true;
console.log('Eclipser Activated');
}else if(result.eclipser_all == true){
chrome.storage.sync.set({ 'eclipser_all': false }, ()=>setPophead);
active=false;
console.log('Eclipser Paused');
}
setPophead();
});
},false);
// display correct pophead
function setPophead(){
chrome.storage.sync.get('eclipser_all', function (result) {
if(result.eclipser_all == false){
pophead.innerHTML=pophead_passive;
pophead.style.backgroundColor='grey';
}else{
pophead.innerHTML=pophead_active;
pophead.style.backgroundColor='green';
}
});
}
});