How do I make a chrome extension popup open up?
原文
2018-08-22 21:28:32
1
1
javascript/
google-chrome/
google-chrome-extension/
google-chrome-devtools
Question
I am making a chrome extension, if the customer is on a specific page, I want the popup to open (As if the user clicked on my extension icon in the browser).
Is this possible? The following does not seem to work:
chrome.browserAction.setPopup({
"tabId": tabId, "popup": "popup.html"
});
How can I make my popup expand out and be shown?
1 answers
solution1
-1 2018-08-23 10:05:29
Source Code:
<html>
<head>
<style>
body {
font-family: sans-serif;
font-weight: 300;
line-height: 1.42em;
color: #A7A1AE;
background-color: #1F2739;
}
h1 {
font-size: 3em;
font-weight: 300;
line-height: 1em;
text-align: center;
color: #4DC3FA;
}
h2 {
font-size: 1em;
font-weight: 300;
text-align: center;
display: block;
line-height: 1em;
padding-bottom: 2em;
color: #FB667A;
}
h2 a {
font-weight: 700;
text-transform: uppercase;
color: #FB667A;
text-decoration: none;
}
p {
padding-left: 10px;
padding-right: 10px;
}
/*--------------------- Table-------------------------------------------------- */
.container {
text-align: left;
overflow: hidden;
width: 75%;
margin: 0 auto;
display: table;
padding: 0 0 8em 0;
}
.container td, .container th {
padding-bottom: 2%;
padding-top: 2%;
padding-left: 2%;
}
.container tr:nth-child(odd) {
background-color: #323C50;
}
.container tr:nth-child(even) {
background-color: #2C3446;
}
.container th {
background-color: #1F2739;
font-size: 30px;
}
.container td:hover {
background-color: #FFF842;
color: #403E10;
font-weight: bold;
}
/*--------------------- Table-------------------------------------------------- */
/*--------------------- Popup-------------------------------------------------- */
.popup {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 1s;
padding-top: 10px;
text-align: justify;
}
.popup a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.popup a:hover {
color: #f1f1f1;
}
.popup .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
/*--------------------- Popup-------------------------------------------------- */
</style>
</head>
<body>
<table class="container">
<tr>
<th colspan="3">Table</th>
</tr>
<tr>
<td width="30px" style="cursor:pointer;" onclick="openPop1()">+</td>
<script>
function openPop1() {
document.getElementById("myPopup1").style.width = "100%";
}
function closePop1() {
document.getElementById("myPopup1").style.width = "0";
}
</script>
<div id="myPopup1" class="popup">
<a href="javascript:void(0)" class="closebtn" onclick="closePop1()">×</a>
<p>1</p>
</div>
<td width="30px">1</td>
<td>1</td>
</tr>
<tr>
<td style="cursor:pointer;" onclick="openPop2()">+</td>
<script>
function openPop2() {
document.getElementById("myPopup2").style.width = "100%";
}
function closePop2() {
document.getElementById("myPopup2").style.width = "0";
}
</script>
<div id="myPopup2" class="popup">
<a href="javascript:void(0)" class="closebtn" onclick="closePop2()">×</a>
<p>2</p>
</div>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td style="cursor:pointer;" onclick="openPop3()">+</td>
<script>
function openPop3() {
document.getElementById("myPopup3").style.width = "100%";
}
function closePop3() {
document.getElementById("myPopup3").style.width = "0";
}
</script>
<div id="myPopup3" class="popup">
<a href="javascript:void(0)" class="closebtn" onclick="closePop3()">×</a>
<p>3</p>
</div>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td style="cursor:pointer;" onclick="openPop4()">+</td>
<script>
function openPop4() {
document.getElementById("myPopup4").style.width = "100%";
}
function closePop4() {
document.getElementById("myPopup4").style.width = "0";
}
</script>
<div id="myPopup4" class="popup">
<a href="javascript:void(0)" class="closebtn" onclick="closePop4()">×</a>
<p>4</p>
</div>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td style="cursor:pointer;" onclick="openPop5()">+</td>
<script>
function openPop5() {
document.getElementById("myPopup5").style.width = "100%";
}
function closePop5() {
document.getElementById("myPopup5").style.width = "0";
}
</script>
<div id="myPopup5" class="popup">
<a href="javascript:void(0)" class="closebtn" onclick="closePop5()">×</a>
<p>5</p>
</div>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td style="cursor:pointer;" onclick="openPop6()">+</td>
<script>
function openPop6() {
document.getElementById("myPopup6").style.width = "100%";
}
function closePop6() {
document.getElementById("myPopup6").style.width = "0";
}
</script>
<div id="myPopup6" class="popup">
<a href="javascript:void(0)" class="closebtn" onclick="closePop6()">×</a>
<p>6</p>
</div>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td style="cursor:pointer;" onclick="openPop7()">+</td>
<script>
function openPop7() {
document.getElementById("myPopup7").style.width = "100%";
}
function closePop7() {
document.getElementById("myPopup7").style.width = "0";
}
</script>
<div id="myPopup7" class="popup">
<a href="javascript:void(0)" class="closebtn" onclick="closePop7()">×</a>
<p>7</p>
</div>
<td>7</td>
<td>7</td>
</tr>
<tr>
<td style="cursor:pointer;" onclick="openPop8()">+</td>
<script>
function openPop8() {
document.getElementById("myPopup8").style.width = "100%";
}
function closePop8() {
document.getElementById("myPopup8").style.width = "0";
}
</script>
<div id="myPopup8" class="popup">
<a href="javascript:void(0)" class="closebtn" onclick="closePop8()">×</a>
<p>8</p>
</div>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td style="cursor:pointer;" onclick="openPop9()">+</td>
<script>
function openPop9() {
document.getElementById("myPopup9").style.width = "100%";
}
function closePop9() {
document.getElementById("myPopup9").style.width = "0";
}
</script>
<div id="myPopup9" class="popup">
<a href="javascript:void(0)" class="closebtn" onclick="closePop9()">×</a>
<p>9</p>
</div>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td style="cursor:pointer;" onclick="openPop10()">+</td>
<script>
function openPop10() {
document.getElementById("myPopup10").style.width = "100%";
}
function closePop10() {
document.getElementById("myPopup10").style.width = "0";
}
</script>
<div id="myPopup10" class="popup">
<a href="javascript:void(0)" class="closebtn" onclick="closePop10()">×</a>
<p>10</p>
</div>
<td>10</td>
<td>10</td>
</tr>
</table>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Can I make chrome extension open as part of webpage instead of popup?
How can I make a Chrome Extension open an external page instead of the defualt popup.html
How do I have a link from a Google Chrome extension popup open in the same tab underneath?
How do I open a chrome-extension popup only under a single circumstance?
How do I create a ReactJS chrome extension that can open a new tab from a popup?
How to keep Google Chrome Extension popup open?
How do I add a popup window to my Chrome Extension?
How to make Chrome Extension popup draggable?
How to make a sticky popup for chrome extension
How to make a chrome extension that opens a popup menu with multiple buttons that open links in a new tab?
Related Tags