How to resize chrome extension window in javascript? - javascript

I am trying to resize my chrome extensions window but I do not know how to do it.
document.write('<div class="card" id="main-card" style="width: 18rem; height: 20rem;">')
document.write('<img class="card-img-top" src="..." alt="Card image cap">')
document.write('<div class="card-body">')
document.write('<h5 class="card-title">Card title</h5>')
document.write('<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card\'s content.</p>')
document.write('<button id="test" class="btn btn-primary">Go somewhere</button>')
document.write('</div>')
document.write('</div> ')
document.getElementById("test").onclick = function() {
document.getElementById("main-card").style.height = "10rem"
}
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="index.js"></script>
</head>
<body>
</body>
</html>
manifest.json
{
"name": "Test",
"version": "1.0",
"description": "This extension",
"author": "Test",
"browser_action": {
"default_popup": "index.html",
"default_title": "WRB"
},
"manifest_version": 2
}

To resize the popup window you just need to resize your content. The best way to do that is by editing the width and/or height of your <body> element.
For example:
document.body.style.width = '600px';
If that isn't working make sure you have a DOCTYPE declaration as per this question.
EDIT:
Now that I see the code you are using here is an updated solution.
document.body.innerHTML +=
`<div class="card" id="main-card" style="width: 18rem; height: 20rem;"><img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card\'s content.</p>
<button id="test" class="btn btn-primary">Go somewhere</button>
</div>
</div>`;
document.getElementById("test").onclick = function() {
document.getElementById("main-card").style.height = "10rem";
document.documentElement.style.height = "10rem";
}
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<script src="index.js"></script>
</body>
</html>
It looks like the problem you were having is that the documentElement (Your <html> tag) was never resizing when the rest of the content shrunk. I just added document.documentElement.style.height = "10rem"; to the callback function to also decrease the size of the document.
In addition but not related to this specific issue, I would not recommend using document.write() because it will cause you problems later down the line especially with overwriting your original page content. To fix this I appended your HTML tags to the innerHTML of your document's <body>. I also moved the <script> tag for your popup script to the body so that it runs only after the body has been loaded.
How to Find A Problematic Element
Since you mentioned that while this works on the sample code, it does not in your actual code here is how you can go about finding the problematic element(s) in your actual project.
Open your popup window.
Right click within the window and click inspect.
This will bring up dev tools.
Hover over your elements in the elements panel, they will be highlighted.
Look for an element that is taking up more space than your desired height. It is best to start from the outermost element and work your way in.
Once you identify an element that is causing an issue, try changing the size of that element on the click of the button to test if the window resizes with it.
If it works, good news, you found your problem. If it doesn't, repeat steps 4-6 with the next outermost element until you find the element that is causing problems.
Here is a GIF showcasing how to open and view elements in dev tools:

For the given requirement, the HTML min-width property can be set to a minimum fixed size, and the height can be set to fit-content as given below.
CSS:
html {
min-width: 400px;
height: fit-content;
}

Related

Why does my Chrome extension's browser action popup not show?

Here is my manifest.json file:
{
"browser_action" :
{
"default_icon" : "Assets/Chromium logosu.png",
"default_popup" : "main.html"
},
"description" : "Bu eklenti, Chromium'un güncelleştirmelerini denetler ve yükler.",
"manifest_version" : 2,
"name" : "Chromium Güncelleştirici",
"version" : "1.0"
}
And here is my main.html file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 16 - https://www.wysiwygwebbuilder.com">
<link href="Chromium_Güncelleştirici_Eklenti_Projesi.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="wb_Image1" style="position:absolute;left:0px;top:0px;width:320px;height:50px;z-index:0;">
<img src="Assets/Başlık.png" id="Image1" alt=""></div>
<div id="wb_Image7" style="position:absolute;left:0px;top:160px;width:320px;height:35px;z-index:1;">
<img src="Assets/Telif Hakkı Metni.png" id="Image7" alt=""></div>
<div id="wb_Image2" style="position:absolute;left:0px;top:50px;width:320px;height:37px;z-index:2;">
<img src="Assets/Güncelleştirmeleri Denetle (Pasif).png" id="Image2" alt=""></div>
<div id="wb_Image3" style="position:absolute;left:0px;top:87px;width:320px;height:36px;z-index:3;">
<img src="Assets/Ayarlar (Pasif).png" id="Image3" alt=""></div>
<div id="wb_Image4" style="position:absolute;left:0px;top:123px;width:320px;height:37px;z-index:4;">
<img src="Assets/Hakkında (Pasif).png" id="Image4" alt=""></div>
</body>
</html>
When I click the extension's button, I get this:
My extension's popup menu
Actually, my popup page should be shown like this:
The UI of my popup file
So, what should I do in order to fix this issue?
Popup html takes height and width from the content of the html loaded.
In your case, all div elements inside body are position:absolute, which results in zero height and width to body tag, and hence the Popup UI appears as a small box when loaded as browser action popup.
You can verify this behaviour by giving fixed height or width to tag in your css.
Why it appears fine when main.html loaded directly to browser?
It actually appears fine, but over here as well the body results in zero height, but because the viewport is not depended on the content of body, it shows the content outside the body as depicted in sample screenshot below.
How to fix?
Fix your CSS such that body gets overall height of the actual content that you need to show. Not sure why every element here you have placed as position absolute, I feel you can avoid that approach and still get the UI as expected by you.
Worst case, you can hardcode the body with fixed height and width of what you need the actual popup html size to be.
#Junaid Hamza
Ok, I have fixed my issue via doing these things:
1- First of all, I have removed all of "position:absolute;"s. But, when I did this, I encountered another issue. This time, the order of images was broken.
2- In order to fix the second issue, I have used a weird method. I have merged last three images into one image.
Anyway, thank you for your answer.😊

Chrome 75 - setting iFrame src attribute causes iFrame parent to load the iFrame content

Chrome v75 appears to have introduced a bug whereby if you replace an iFrame's src programatically, it will replace the entire page instead of the iFrame.
This didn't happen on v74 and I can't get a test case to work (yet), it just fails in our site. (The site hasn't changed since going from v74 to v75, only Chrome has changed)
It appears to work fine the first time but then when you change it again (in our case viewing report drill downs) it causes the entire page (i.e. the iFrame's Parent) to load the src you were trying to load into the iFrame.
It also doesn't matter if you use pure Javascript or (in our case) JQuery, both cause the same issue.
EDIT: After a few hours detective work, I've found the bug. Setting the tag in the iFrame's content causes Chrome to load the iFrame's content into it's parent rather than the iFrame itself.
I've setup a Plunker account with a demo: https://plnkr.co/edit/UQ0gBY?plnkr=legacy&p=info
Just so I can post the link to Plunker, here is the code for the main file & the iframe content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function onLoaded() {
// find element
let button = document.getElementById("button");
button.addEventListener("click",function(e){
// Add a random number on the end as a cache buster
document.getElementById('frame-finance-custom').src = 'test2.html?rnd=' + Math.random();
},false);
};
document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>
</head>
<body>
<div>IFrame Src Changing Test</div>
<div>
<div id="div-frame-finance-custom" style="float:left;width:33%">
<iframe id="frame-finance-custom" name="frame-finance-custom" class="iframe"
style="border:1px solid black; width: 100%; height: 350px; overflow-y: scroll; vertical-align: top;">
no data
</iframe>
</div>
<div style="float:left;margin-left:1em;">
Detail: Loading an iframe page with a <Base> tag in it with target set to "_parent" will cause any refresh of that frame to replace the parent document<BR>
<BR>Instruction: <UL><LI>Click the 'Update Frame' Button, this will load test2.html into the frame. <LI>Click it again & it will replace the iframe's parent with the content of the iFrame.</UL>
<BR>Confirmation: Remove the <Base> tag from the header of test2.html & reload, it will work as expected.
</div>
</div>
<br clear=both>
<div>
<button id="button">
Update Frame
</button>
</div>
</body>
</html>
IFrame Content (test2.html):
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_parent"/>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>This is the frame content</div>
</body>
</html>
Note, using their new layout it doesn't work, but using their legacy layout it does. Feel free to save the files locally and use chrome directly too.
Ok, so this turned out to be a bug in Chrome rather than anything else, so yes, strictly not a SO question, but seeing as SO ranks so well in Google (other search engines are available), I thought it better to leave it here as a solution rather than simply delete it, just incase anyone else has a similar problem.
The reason is outlined as an edit in my question, the solution is to remove the <base target="_parent"> tag from the iFrame and programatically add the 'target="_parent"' attribute to any links in the iFrame.
We do this via jQuery, I'm sure its just as easy via vanilla Javascript.
$('a').attr('target','_parent');
Add that to the javascript that runs when a page has loaded and it'll replace add target="_parent" to any links on the page.
e.g.
<script>
function onLoaded() {
// find all links and add the target attribute
$('a').attr('target','_parent');
};
document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>
As #Kaiido says in his comment, its apparently fixed in Chrome v77, but this isn't the current (as of June 2019) stable release, so we've had to add the workaround into production so that our CRM works with Chrome v75. Thanks to #Kaiido for confirming that.

embed-responsive shows white border in bottom

I have a webpage, that shows another html page using iframe. Please see my code below.
<html>
<head>
<title>DotWifi</title>
<meta http-equiv="Pragma" content="no-cache">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="http://www.xxxx.com/xxxxxx/xxpage?xxxId=123&tok=$tok&authaction=$authtarget"></iframe>
</div>
</body>
</html>
I am try to show a responsive webpage using iframe using embed-responsive-item class. But it shows a white border in bottom. Please see the below image.
That's not a border, it's simply the background of the body.
The iframe's parent div, embed-responsive-4by3 is supposed to have a width to height ratio of 4 by 3. That's what this class does! So if the width is 416 pixels (the width of the window) then the height becomes 312 pixels.
That's all there is to it.
If you don't want that, the solution is to remove the embed-responsive-4by3 class from the div.
Or, if all your page ever does is show another page in an iframe, you can dispense with Bootstrap altogether and put only the iframe on the page!

HTML rollover button image: how to do with Internet Explorer?

i've this simple piece of code that don't work in Internet Explorer, but do work in Chrome, Firefox etc.
It is a simple button image 'rollover' .
<html>
<head>
</head>
<body>
<img src="p1.png" name="img1" onMouseOver="document.images[0].src='p2.png'" onMouseOut="document.images[0].src='p1.png'" ></a>
</body>
</html>
What's wrong in IE 6,7,8 ?
Change your code to this:
<html>
<head>
</head>
<body>
<img src="p1.png" name="img1" onMouseOver="this.src='p2.png'" onMouseOut="this.src='p1.png'" />
</body>
</html>
Also, I if your HTML page contains more data the the HTML page you've showed in your question, I suggest you put this code in the beginning of the <body> in order to preload the rollover image so there will be no delay when you want the rollover to work (otherwise, the rollover image will be downloaded to the user's device only when he hovers the image, causing a slight delay to the rollover (depending on the onMouseOver image size)):
<img src="p2.png" class="hiddenPic" />
<!-- loading (hidden) rollover image before all the other page data -->
And add the CSS hiddenPic class code: .hiddenPic { display: none; }
Other methods to preload the rollover image can be done using CSS or the JavaScript onLoad event handler.
onmouseover="this.src='p2.png'"
Use this instead of document.images....
Another method (works if you need to rollover change something else as well):
<img src="p1.png" name="img3" id="img3" onMouseOver="document.getElementById('img3').src='p2.png'" onMouseOut="document.getElementById('img3').src='p1.png'" >
http://jsfiddle.net/DNtUY/5/ (3 examples, yours, Said's, this one).
PS. Your open tag is <img ...> but the close tag is </a>
Maybe if the images are not that heavy, you might try a different approach like declaring both images and hide one of them. Then with javascript when you roll over the visible image, you hide it and show the other one.
Perfectly working code for your question mr.Stighy:
<html>
<head>
<style type="text/css">
</head>
<body>
<img src="../a_b_c/a.jpg" alt="" onMouseOver="this.src='b.jpg'" onMouseOut="this.src='a.jpg'" onClick="this.src='c.jpg'" class="style1"></a>
</body>
</html>
I think we messed up with the images, that's it... p.s. Giulio is waching you.

Div display:none - want to only load content when it's visible

I have a series of divs with images as backgrounds, fairly large images at that, 1-2 MBs.
What I'd like to do is only load the content within them when they're visible.
(They're display:none by default and onclick of various links I use jquery to slide them down/up).
you should post your code, but I think this might be what you are looking for.
html
Link to click
<div id="imgname"></div>
jquery
$('a').click(function(){
$('div#imgname').html('<img src="image.path" />');
});
send html and slide the div block down
Link to click
<div id="imgname"><img src="image.path" /></div>
Below is a rough sketch of an idea which might work. Create hidden image tags for each of the photos you want to load, attaching onload event handlers directly. insert simply takes the image which just loaded and creates a css background rule to be inserted into the appropriate div.
<!DOCTYPE html>
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
div.placeHolder {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<img data-id='imageA'
src='http://some-large-image.jpg'
style='display:none;'
onload='insert(this);' />
<div data-id='imageA' class='placeHolder' style='display:none;'></div>
<script>
function insert(img){
$img = $(img);
$div = $('div.placeHolder[data-id='+$img.attr('data-id')+']');
var cssSnippet = "transparent url("+ $img.attr('src') +") no-repeat 0 0";
$div.css('background', cssSnippet).show();
}
</script>
</body>
</html>

Categories

Resources