I am trying to load a page that will search the domain of your current tab into this url: "https://www.owler.com/iaApp/browsecompanyprofiles.htm?searchTerm=" + window.location.hostname.
It works in Editors I have used online like JSbin, etc but whenever I upload it into google, it is a blank white pop up. What Im I missing. I know that I shouldn't have script in my popup.html so I created a seperate file but it still isn't working.
This is my js and html file.
function newDoc() {
window.location.assign("https://www.owler.com/iaApp/browsecompanyprofiles.htm?searchTerm=" + window.location.hostname)
}
document.addEventListener('DOMContentLoaded', function() {
newDoc();
});
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script id="jsbin-javascript">
function newDoc() {
window.location.assign("https://www.owler.com/iaApp/browsecompanyprofiles.htm?searchTerm=" + window.location.hostname)
}
document.addEventListener('DOMContentLoaded', function() {
newDoc();
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">function newDoc() {
window.location.assign("https://www.owler.com/iaApp/browsecompanyprofiles.htm?searchTerm=" + window.location.hostname)
}
document.addEventListener('DOMContentLoaded', function() {
newDoc();
});
</script></body>
</html>
<style>
html, body{
width: 350px;
height: 600px;
border: none;
margin: 0px;
padding: 0px;
}
</style>
mainfest.json:
{
"manifest_version": 2,
"name": "Owler",
"description": "Pull company information from any URL",
"version": "1.0",
"icons": {
"48": "icon-48.png",
"128": "icon-100.png"
},
"permissions": [
"activeTab", "tabs", "<all_urls>"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
Related
I have tried to create an extension for chrome that captures the screen. But I found an issue (in my opinion). chooseDesktopMedia shows the dialogue for choosing the screen and hides it immediately.
manifest.json:
{
"manifest_version": 2,
"name": "desktopCapture",
"description": "User testing application",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"desktopCapture"
]
}
popup.js
document.querySelector('#start').addEventListener('click', function(event) {
chrome.desktopCapture.chooseDesktopMedia(
["screen", "window"],
function(id) {
console.log("id",id);
});
});
popup.html
<!DOCTYPE html>
<html>
<head>
<title>Desktop capture</title>
</head>
<body>
<button id="start">Start</button>
<script src="popup.js"></script>
</body>
</html>
I'm trying to dip my feet into the water of the pool that is creating chrome extensions. I tried to start off with something I thought would be simple but it has proven to stump me as I don't really know where I can read information on this sort of thing.
Anyhow, currently my goal is to have a chrome extension that does the following:
You click the extension icon -> an HTML popup file opens displaying a singular button -> when you click this button it opens a specified link in a new chrome tab and changes that to be your active tab.
From my searching, I have found that I might have to use a background script so that I don't violate a policy regarding Manifest version 2 or something of the sorts, I tried it and it didn't really work for me. I really don't want to wander into creating a whole new script if that's not the problem.
Here's my manifest.json file followed by my popup.html file.
{
"manifest_version": 2,
"name": "strong text",
"author": "authorname",
"description": "desctext",
"version": "1.4",
"permissions": [
"tabs"
],
"icons": { "16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png" },
"browser_action": {
"default_popup": "popup.html"
}
}
<!doctype html>
<html>
<head>
<title>Hovertext</title>
<script src="popup.js"></script>
</head>
<body>
<div id="header">
<h1>Header</h1>
</div>
<div id="divider">
<p><button type="button" id="buttonA">Button Text</button>
<script>
var button1 = document.getElementById("buttonA");
button1.addEventListener("click", function() {
chrome.tabs.create({url: "http://www.google.com/"});
});
</script>
</div>
<div id="footer">
footer stuff here
</div>
</body>
<style>
body {
background-image: url("https://s-media-cache-ak0.pinimg.com/736x/51/3e/4f/513e4f5274ec48f29b894b0b8409658f.jpg");
}
#header {
background-color:rgb(96, 222, 72);
text-align:center;
padding:1px;
}
#footer {
background-color:rgb(96, 222, 72);
clear:both;
text-align:center;
padding:1px;
}
#divider {
text-align:center;
}
#buttonA {
color:white;
background-color:rgb(0, 152, 255);
border-width:3px;
border-color:white;
}
#buttonA:hover {
color:rgb(0, 152, 255);
background-color:white;
border-width:3px
border-color:rgb(0, 152, 255);
}
</style>
</html>
I'm new to this type of stuff and stack-overflow in general so if I didn't clarify something correctly just let me know, Thanks for the help in advance!
A simple code to open new tab on click some button. Try to use it on your extension.
manifest.json:
{
"name": "Test",
"version": "1.1",
"description":
"Description",
"permissions": [
"notifications",
"fontSettings"
],
"options_page": "options.html",
"manifest_version": 2
}
option.html:
<!doctype html>
<html>
<head>
<title>Demo</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="options.js"></script>
</head>
<body>
<input type="button" id="btnOpenNewTab" value="Click to open new tab"/>
</body>
</html>
option.js:
window.addEventListener('DOMContentLoaded', function() {
// your button here
var link = document.getElementById('btnOpenNewTab');
// onClick's logic below:
link.addEventListener('click', function() {
var newURL = "http://stackoverflow.com/";
chrome.tabs.create({ url: newURL });
});
});
You use this source code for your popup's button
window.opener.open("http://www.google.com/");
Its possible to create an Action in popup.html ?
To simplify, when the user click on the button, move to a 'new' popup.html..
I'm trying to create a menu using buttons to indicate Autors and when clicked result informations about the autors.
Follow my project so far..
manifest.json
{
"manifest_version": 2,
"name": "Autors info",
"version": "1.0",
"description": "123",
"browser_action":{
"default_popup": "popup.html"
},
"icons": {
"16": "icon16.png"
}
}
popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html, body {
width: 500px;
background-color: #ADD8E6;
}
</style>
</head>
<body>
<h1>Info Autors</h1>
<h3>Click bellow to check autors story:</h3>
<button type="button" id="create">JRR Tolken</button>
</body>
</html>
I am trying to create a very simple chrome extension that open multiple tabs of LinkedIn searching different keywords that I type in.
Since this is my first extension, most of my codes are based on this extension, which is very similar to my idea.
The problem is when I click my "search" button, nothing happens. I just started coding for a week so I'd greatly appreciate any help!
Besides knowing what is wrong with the codes, is a background script necessary in this case?
Thanks!
Here are my codes:
Manifest.json
{
"manifest_version": 2,
"name": "Search Assistant",
"description": "This extension makes LinkedIn Search easy.",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["myscript.js"]
}
],
"chrome_url_overrides" : {
"newtab": "newtab.html"
},
"background": {
"scripts": ["bg.js"]
}
}
Popup.html
<!doctype html>
<head>
<style type="text/css">
body{
font family: Helvetica, Arial, sans;
font-size: 12px;
}
#instruction{
padding-bottom: 10px;
}
#searcharea{
padding-bottom: 10px;
}
#search{
padding-bottom: 10px;
float: left;
}
#companies{
white-space: nowrap;
overflow:auto;
}
</style>
<style type="text/javascript" src="popup.js"></style>
</head>
<body>
<div id="instruction">Companies you want to search for:</div>
<div id="searcharea"><textarea rows="20" cols="80" id="companies" wrap="soft" tabindex="1"></textarea></div>
<div id="search">
<button id="btn1" tabindex="2">Search</button>
</div>
<p id="demo"></p>
</body>
</html>
Popup.js
document.addEventListener('DOMContentLoaded', function (){
document.getElementById('btn1').addEventListener('click', loadSites);
document.getElementById('companies').focus();
});
function loadSites(e){
var companies = document.getElementById('companies').value.split('\n');
for(var i=0; i<companies.length; i++){
thecompany = companies[i].trim();
thesearchurl = 'https://www.linkedin.com/vsearch/c?type=companies&keywords=' + thecompany;
chrome.extension.create({url: thesearchurl, selected:false})
}
}
You have 2 slight errors right now. Firstly you should use script-tag instead of style to include javascript files. Second: it is better to load javascript after your page is ready. To fix these follow steps below
Remove line <style type="text/javascript" src="popup.js"></style>
Add this <script type="text/javascript" src="popup.js"></script> to a line right before </body>.
I am trying to replicate search functionality through an extension similar to what page search does using Ctrl+F. I have been going through the documentation on developing a basic chrome extension. I have created below but somehow it doesn't work.
What i have done so far is, created a popup html page which will take search text as input parameter and tries to send the message to content script, as content script has access to the dom elements enabling searching can be done. I am also not sure how exactly i can do the debugging part here specially for the extension/content script.
manifest.json:
{
"manifest_version": 2,
"name": "Custom Search Plugin",
"description": "This extension allows to search for the current page",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
// change 'matches' attribute to load content script(search.js) only in pages you want to
"matches": ["<all_urls>"],
"js": ["jquery-1.11.3.min.js","search.js"],
"css": ["highlight.css"]
}
],
"permissions": [
"tabs",
"activeTab"
]
}
HTML:
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<style>
body {
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
font-size: 100%;
}
#searchfield{
/* avoid an excessively wide status text */
white-space: pre;
text-overflow: ellipsis;
overflow: hidden;
max-width: 400px;
}
</style>
<script src="popup.js"></script>
</head>
<body>
<input type="search" name"pagesearch" id="searchfield">
</body>
</html>
Popup.js:
window.onload = function(){
document.getElementById('searchfield').oninput = searchText;
};
function searchText(){
var search = document.getElementById('searchfield').value;
if(search){
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: search},function(response) {
console.log(response.farewell);
});
});
}
}
search.js:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
console.log(request.greeting);
});
Somewhere i am missing some important stuff. Please help!