What I'm trying to achieve is simple.
Now there's an extension already made called Note Anywhere. Notice when you click the app's icon the sticky note displays on the webpage, and you're able to drag, and drop that div anywhere you want.
What I'm trying to achieve is very similar.
Click #1 fades div in
Click #2 fades div out
I'll worry about drag and drop once I can get the div to actually show. I've spent over 16 hours trying to achieve this effect, and after getting extremely agitated I had to edit my question, and ask once more with updated info. So this will no longer be a problem again.
Here's my code.
Manifest:
{
"name": "CamDesk",
"version": "0.0.1",
"description": "The Desktop Webcam Widget",
"permissions": ["tabs", "http://*/*", "https://*/*"],
"background_page": "background.html",
"browser_action": {
"default_icon": "images/logo.png",
"default_title": "CamDesk"
},
"content_scripts": [ {
"matches": ["http://*/*", "https://*/*"],
"css": ["css/style.css"],
"js": ["js/jquery.js", "js/jquery-swfobject.js", "js/background.js"]
} ],
"icons": {
"48": "images/48x48.png",
"256": "images/logo.png"
}
}
CSS:
.camdesk {
display:none;
width:320px;
height:240px;
background-color:#FFF;
box-shadow:0px 4px 16px rgba(0, 0, 0, 0.8);
overflow:hidden;}
Background Page:
<html>
<head>
<script src="js/background.js"></script>
</head>
<div id="camdesk">
Please install the most recent version of flash to use CamDesk.
</div>
</html>
Content Script: "To Show & Hide DIV"
$(document).ready(function() {
$('.camdesk').flash({
swf: './camdesk.swf',
width: 320,
height: 240
});
});
chrome.browserAction.onClicked.addListener(getMessage);
getMessage();
function getMessage() {
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(null, function(tab) {
$('.camdesk').fadeOut(350);
}); //getting response from content script
});
}
chrome.extension.onRequest.addListener(
function(sendResponse) {
if $('.camdesk').fadeIn(350);
$('.camdesk').fadeOut(350);
else
sendResponse({});
});
To create that effect, you need to use Content Scripts. That is the only way you can manipulate the DOM for a website your visiting. Since your coming from the extension context (Browser Action button), you need to use Message Passing to transfer commands to show/hide to the DOM.
So the steps to achieve what you need:
Instantiate a chrome.browserAction.onClicked.addListener in the Background Page
Use chrome.tabs.sendRequest to tell the DOM what to do. You need to send a message asking it to Show or Hide the overlay you wanted.
Listen on extension requests from the Content Script using chrome.extension.onRequest.addListener When you receive a Show or Hide command from the extension, you can add/remove the DOM.
Hope that gives you a slight push!
Related
I'm doing a Frontend Mentor challenge and I've ran into a problem when publishing my project to Vercel.
The background image can't load. Everything works on my local machine, but when deployed, the only image that doesn't load is that background image.
I'm using the Vite buildtool, React and TailwindCSS.
The image path is ./public/images/bg-mobile.svg
I imported the image in my tailwind.config.cjs and use it as a tailwin "bg-" class.
If anyone knows what I'm doing wrong, I'd be really happy to know.
//tailwind.config.cjs
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
"huddle-violet": "hsl(257, 40%, 49%)",
"huddle-magenta": "hsl(300, 69%, 71%)",
},
backgroundImage: {
"desktop": "url('./images/bg-desktop.svg')",
"mobile": "url('./images/bg-mobile.svg')"
},
},
},
plugins: [require('prettier-plugin-tailwindcss')],
};
//index.html
<body class="bg-huddle-violet bg-mobile bg-contain bg-no-repeat">
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
Link to the hosted site
Link to the Github repo
The relative path being used is wrong.
./ with this you mean one heirarchy up.
But according to your question ./public/images/bg-mobile.svg
So try replacing ./ with / it should work.
Final code:
backgroundImage: {
"desktop": "url('/images/bg-desktop.svg')",
"mobile": "url('/images/bg-mobile.svg')"
},
backgroundImage: {
"desktop": "url('/images/bg-desktop.svg')",
"mobile": "url('/images/bg-mobile.svg')"
},
How can I display a modal dialog from the context menu?
I can show a new window from context menu which opens in its own tab:
var menuItem = {
"id": "rateMenu",
"title": "Rate Item",
"contexts": ["all"],
}
chrome.contextMenus.create(menuItem);
chrome.contextMenus.onClicked.addListener(function (clickData) {
open('index.html');
});
I also know how to show a modal dialog, using bootstrap (for example) on the page itself:
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
In this particular case I want to show a modal dialog that you cannot close unless you press the "close" button.
However, I have no idea how to show the modal popup window straight away from the context menu.
Does anyone have any idea how this can be achieved?
Thank you!
I have done the same. Just use content script to show modal.
Example : When user clicks the context menu item, send message to content script to let it know about it so that it should open a modal.
background.js:
chrome.contextMenus.onClicked.addListener(function (clickData) {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {type: "openModal"});
});
});
contentscript.js:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
switch (request.type){
case "openModal":
$('#myModal').modal({
backdrop: 'static',
keyboard: false
});
break;
});
Make sure to include necessary css and js files under content_scripts in manifest.json
"content_scripts": [
{
"matches": ["https://*/*"],
"css":["bootstrap.min.css"],
"js":["jquery.min.js","bootstrap.min.js","contentscript.js"],
"run_at":"document_end"
}
]
NOTE : Using bootstrap.min.css may conflict with the page UI and it may change it. To avoid this, move your modal and the required js and css files in a separate html file(modal.html). Then inject your iframe into the tab using content script.
var iframe = document.createElement('iframe');
iframe.src = chrome.extension.getURL("modal.html");
iframe.frameBorder = 0;
iframe.id = "myFrame";
$(iframe).hide();//necessary otherwise frame will be visible
$(iframe).appendTo("body");
Remember to add modal.html and all the css and js files that are used inside modal.html like modal.js,bootstrap.min.js,bootstrap.min.css under web_accessible_resources:
web_accessible_resources": ["modal.html","modal.js","bootstrap.min.js","bootstrap.min.css"]
Now you can hide or show your iframe using content script but to show and hide modal, it can be done from inside iframe only. So you would need to pass a message from background to iframe to show the modal.The code above mentioned for contentscript will work for iframe also.
In case you want to hide the iframe, just send message from iframe to contentscipt using window.parent.postMessage().
Example:
modal.js:
window.parent.postMessage({ type: "hideFrame" }, "*");
contentscript.js:
window.addEventListener("message", function(event) {
if (event.data.type == "hideFrame") {
$("#myFrame").hide();
}
});
Im trying to make an extension for chrome that injects html code to specific div on a specific page.
This is the example page I want to inject some code:
http://netdna.webdesignerdepot.com/uploads7/creating-a-modal-window-with-html5-and-css3/demo.html
So far I have made this:
manifest.json:
{
"manifest_version": 2,
"content_scripts": [ {
"js": [ "iframeInjector.js" ],
"matches": [ "http://netdna.webdesignerdepot.com/*/*/*"
]
} ],
"description": "Inject html",
"name": "Inject html",
"version": "1",
"web_accessible_resources": ["test.html"]
}
test.html:
Test html code
iframeInjector.js:
var iframe = document.createElement ("iframe");
iframe.src = chrome.extension.getURL ("test.html");
document.body.insertBefore (iframe, document.body.openModal);
On the example page there is div called "openModal", how do I inject my html code into that div ?
Another question: Is there way to read page title to variable and use that variable in my html code which Im infecting ?
Thank you..
So there is a div with id="openModal" to which you want to append the iframe?
iframeInjector.js
var iframe = document.createElement ("iframe");
iframe.src = chrome.extension.getURL ("test.html");
var yourDIV = document.getElementById("openModal");
yourDIV.appendChild(iframe);
Since I don't know much about jQuery I have am not being able to produce a dialog box on hover over a checkbox. Any suggestion would be helpful. Below is my code:
<input type="checkbox" id="employee-id" name="employeeId" onmouseover="produceDialog()">
<div id="employee-info-div"></div>
Similarly my jQuery is:
produceDialog(){
$("employee-info-div").dialog({
open : function ( event, ui ) {
$(".ui-dialog-titlebar-close").hide();
},
dialogClass : 'fixed-dialog',
resizable : false,
height : 150,
width : 250,
modal : false,
create : function ( event ) {
$(event.target).parent().css('position', 'fixed');
},
});
}
This may be the example you are looking for:
Working jsFiddle here
Below is a stand-alone example, which should just be copy/play.
Notes:
The element $('#employee-info-div'); was assigned to a variable to make code more efficient and faster to type. (More efficient b/c only check DOM once for the element, retrieve from variable after that.)
Used jQuery hover() method to open the dialog, but initialized the dialog separately (upon document ready). Note that the hover method must have two functions associated with it; the second function need not do anything but it must be there.
The hover-IN method assigned to the class $('.employee-id') runs the code $('#employee-info-div').dialog('open');, which opens the dialog. Note that the 2nd element is accessed via variable name.
Copy/Paste the following code into a separate document in your webroot and run, OR just use the above jsFiddle link to see it all in action.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<style>
#employee-info-div{
width:40%;
float:right;
padding:5px;
background:wheat;
color:blue;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var eid = $('#employee-info-div');
var blurb = '<h2>Employee Information:</h2>Here is some example information about this employee. It can be text inserted like this, or it can be information retrieved from a database via AJAX. For simple AJAX examples, <a target="_blank" href="http://stackoverflow.com/questions/17973386/ajax-request-callback-using-jquery/17974843#17974843"> see this StackOverflow post </a> (remember to upvote any posts that are helpful to you, please.)';
function hovIn() {
$(this).css({'font-weight':'bold','color':'blue'});
eid.html(blurb);
eid.dialog('open');
}
function hovOut() {
//eid.html(''); //<-- Causes dlg text to appear/disappear as you move mouse on/off checkbox and label
$(this).css({'font-weight':'normal','color':'black'});
}
$('.employee-id').hover(hovIn, hovOut);
eid.dialog({
autoOpen:false,
title:"Your jQueryUI Dialog",
show: "fade",
hide: "fade",
width:500, //orig defaults: width: 300, height: auto
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
}); //END eid.dialog
}); //END $(document).ready()
</script>
</head>
<body>
Hover over below checkbox to see hidden DIV:<br><br>
<input type="checkbox" id="employee-id" class="employee-id" name="employeeId" ><span class="employee-id">Hover over this checkbox</span>
<div id="employee-info-div"></div>
</body>
</html>
You can bind the hover event to your checkbox:
$("#employee-id").hover(function(){
// call your produceDialog function here
});
One of my websites went online a few weeks back. The design included an embed tweet within a div which displayed properly at that time.
However while checking today, I noticed the embed tweet has moved to the right in Mozilla. Now what's puzzling me is that I didn't even touch the code, so has twitter or Mozilla updated one of their properties???
heres a link to my site.
OK the problem is solved finally managed overwriting the css created by twitter.
I simply used the following scc selector
"div_containing_twitter_script" iframe {properties}
So if I placed the code in a div with "twitter" as an id the code would be
#twitter iframe {property:value}
Nevertheless thanks a lot for trying to help me out...
If Twitter feeds are not showing you can use this following code.
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <p></p> <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 5,
interval: 1000,
width: 180,
height: 200,
theme: {
shell: {
background: '#88d4ff',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#333333',
links: '#00aeef'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
behavior: 'default'
}
}).render().setUser('#YourUser').start(); /* Need to change User ID*/
</script>