So I am very new to chrome extensions and what i am trying to get done with my first chrome extension is to send a url from chrome extension to a php file.
I have tried $.post method and also $.ajax but the isset function in php to check post data always fails.
Here is my code:
manifest.json
{
"manifest_version": 2,
"name": "First Chrome Extension",
"description": "Send Url On Click",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["jquery-2.1.4.min.js"]
}
],
"permissions": [
"activeTab",
"http://*/",
"https://*/"
]
}
POPUP.html
<html>
<head>
<title>First Chrome Extension</title>
<script src="popup.js"></script>
</head>
<body>
<form name="testform">
<input type='button' id='alertButton' value='Send URL'>
<div id="returnfromphp"></div>
</form>
<script src="jquery-2.1.4.min.js"></script>
</body>
</html>
POPUP.js
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('alertButton').addEventListener('click', ShowUrl);
});
function ShowUrl(){
chrome.tabs.getSelected(null, function(tab) {
myfunction(tab.url);
});
}
function myfunction(tablink) {
var urlretained = tablink;
alert(urlretained);
$.ajax({
type: "POST",
url: "myfile.php",
data: {myData:urlretained},
success: function(data){
alert('Items added');
},
error: function(e){
console.log(e.message);
alert('Addition Failed');
}
});
}
myfile.php
<?php
if(isset($_POST['myData'])){
echo"Data Detected";
}else{
echo"Data Not Set";
}
?>
Related
Below is the code m trying but getting response null in popup. I want to do message passing from web page to chrome extension html .
mainfest.json
{
"manifest_version": 2,
"name": "AnyName",
"description": "A simple extension for Chrome",
"version": "1.0",
"author": "#aag",
"background": {"scripts": ["background.js"]},
"permissions":[
"tabs", "http://*/*", "activeTab", "storage", "ftp://*/*", "<all_urls>", "clipboardWrite", "contentSettings", "cookies", "history"
],
"page_action": {
"default_icon": "logo.png" ,
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["*://*/show_bug.cgi?id/*"],
"js": ["content.js"],
"run_at": "document_start"
}]
}
popup.html
<!doctype html>
<html>
<head>
<title>Extension</title>
<script src="popup.js"></script>
<script src="jquery.js"></script>
</head>
<body>
<h3>Whiteboard!!</h1>
<p id='pagetitle'>Page is still Loading..</p>
<p id='reported'>Date is still Loading..</p>
</body>
</html>
popup.js
document.addEventListener('DOMContentLoaded', function() {
prepareSummary();
});
function prepareSummary() {
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, {
action: "getSummary"
}, function(response) {
if (response == null) {
alert('no respose');
} else {
var wbVar = response.wb;
var rdateVar = response.rd;
document.getElementById('pagetitle').innerHTML = wbVar;
document.getElementById('reported').innerHTML =rdateVar ;
}
});
});
}
content.js
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if (request.action == "getSummary") {
var wbVar = document.getElementById('status_whiteboard').value;
var rdateVar = document.getElementsByClassName("bz_comment_time")[0].innerText;
sendResponse({
wb: wbVar,
rd: rdateVar,
resp: "Test"
});
} else
sendResponse({
resp: "Nothing"
});
});
background.js
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
var url = tab.url;
if (isUrl(url)) {
chrome.pageAction.show(tab.id);
}
});
function isUrl(url) {
if (url.includes('show_bug.cgi?id'))
return true;
else
return false;
}
The main issue is i am not able to get the string coming on webpage. After fetching from webpage i need to show on extension popup.html
There are a ton of information about this on SO and elsewhere, but I couldn't get it to work!
I have this popup.html:
<html>
<head>
<title>My popup that should display the DOM</title>
<script src="popup.js"></script>
</head>
<body>
<button id="btn">Click!</button>
<input type="text" id="info">
</body>
</html>
my manifest.json:
{
"manifest_version": 2,
"name": "Get HTML example w/ popup",
"version": "0.0",
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": [ "http://*/*", "https://*/*" ],
"js": ["jquery-2.2.1.min.js","content.js"]
}],
"browser_action": {
"default_icon": "icon.png",
"default_title": "Get HTML example",
"default_popup": "popup.html"
},
"permissions": ["tabs"]
}
background.js:
function doStuffWithDOM(infoHtmlText) {
alert("I received the following DOM content:\n" + infoHtmlText);
chrome.extension.getBackgroundPage().info = infoHtmlText;
}
chrome.tabs.onUpdated.addListener(function(id,changeInfo,tab){
if(changeInfo.status=='complete'){ //To send message after the webpage has loaded
chrome.tabs.sendMessage(tab.id, { status: "ok" },function(response){
infoHtmlText = $("#domElement").text();
doStuffWithDOM(infoHtmlText);
});
}
})
content.js:
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
/* If the received message has the expected format... */
if (msg.status && (msg.status == "ok")) {
/* Call the specified callback, passing
the web-pages DOM content as argument */
sendResponse("something?");
}
});
Is there a simple example, where you can click on a button in the popup and get content from the DOM and show it in the popup?
Here is a sample code based from your codes:
popup.js
function hello() {
var name = document.getElementById('info').value;
alert("Hello " +name);
}
document.getElementById('btn').addEventListener('click', hello);
popup.html
<html>
<head>
<title>My popup that should display the DOM</title>
</head>
<body>
<button id="btn">Click!</button>
<input type="text" id="info">
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
manifest.json
{
"manifest_version": 2,
"name": "Get HTML example w/ popup",
"version": "0.0",
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "Get HTML example",
"default_popup": "popup.html"
},
"permissions": ["tabs", "<all_urls>"]
}
background.js : leave blank (not sure on this on because I'm new at chrome development) but it is working.
I got the answer from this SO question, if you directly use inline headers you will encounter this error message:
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".
I think I got the hang of it but it's just not working... and I can't figure out why.
Manifest:
{
"name": "Dummy Extension",
"description": "Dummy Extension Description",
"version": "2.0",
"permissions": [
"activeTab"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_title": "Dummy Extension",
"default_popup": "popup.html"
},
"manifest_version": 2,
"content_scripts": [ {
"js": [ "jquery.min.js", "background.js" ],
"matches": [ "http://*/*", "https://*/*"]
}]
}
Background:
chrome.extension.onMessage.addListener( function(request,sender,sendResponse)
{
if( request.greeting === "GetURL" )
{
var tabURL = "Not set yet";
chrome.tabs.query({active:true},function(tabs){
if(tabs.length === 0) {
sendResponse({});
return;
}
tabURL = tabs[0].url;
sendResponse( {navURL:tabURL} );
});
}
}
Popup.html
<!DOCTYPE html>
<head>
<script src='popup.js'></script>
<script src='jquery.min.js'></script>
</head>
<body>
Hello World!
<br />
<input id="tabURL" type="text" />
<br />
<input value="SEND!" type="button" id="send" />
</body>
</html>
And popup.js
function getURL() {
chrome.extension.sendMessage({greeting: "GetURL"},
function (response) {
tabURL = response.navURL;
$("#tabURL").val(tabURL);
});
}
$("#send").click(getURL());
I just can't figure out whats wrong, jquery is defined, I get no console errors.
Any help would be great!
$("#send").click(getURL()); gets executed before DOM is fully constructed and fails. Also, you need to pass the reference to getURL, not execute it.
To fix:
$(document).ready(function(){
$("#send").click(getURL);
});
By the way, you may be looking in the wrong console for errors. See this debugging tutorial for popups.
I'm new to chrome extension coding and relatively new to javascript. The extension is of the type page_action . I'm trying to send a simple message to background.js on click of button in popup.html. I've seen similar questions on this site, however nothing seems working. The loading of the extension is fine. please help
/* __background.js__ */
function checkForValidUrl(tabId, changeInfo,tab){
console.log("Extension loaded");
chrome.pageAction.show(tabId);
}
function readMessage (request, sender, sendResponse){
alert("reached");
console.log(request.greeting);
sendRequest({farewell:"goodbye"});
}
chrome.extension.onRequest.addListener(readMessage);
chrome.tabs.onUpdated.addListener(checkForValidUrl);
/* __manifest.json__ */
{
"name": "DemoExtension",
"version": "1.0",
"manifest_version": 2,
"background": {
"scripts": [
"jquery.js",
"background.js"
]
},
"description": "demo extension to learn coding chrome extensions.",
"icons": {
"16": "images/16x16.png",
"48": "images/48x48.png",
"128": "images/128x128.png"
},
"page_action": {
"default_icon": {
"19": "images/19x19.png",
"38": "images/38x38.png"
},
"default_title": "Demo extension",
"default_popup": "popup.html"
},
"options_page": "options.html",
"permissions": [
"tabs",
"storage",
"http://*/*",
"https://*/*"
]
}
-
__popup.html__
<!DOCTYPE HTML>
<html>
<head>
<title>Demo extension</title>
<script src="./popup.js"></script>
</head>
<body>
<button id="clickMe">Add</button>
</body>
</html>
-
__popup.js__
function sendMessageToExtn() {
alert("reached in popup");
chrome.extension.sendMessage({
greeting : "hello" },
function(response) { console.log(response.farewell);
});
}
document.getElementById('clickMe').addEventListener('click', function () {
sendMessageToExtn();
});
I'm now getting error Uncaught TypeError: Cannot call method 'addEventListener' of null (anonymous function)
There is a similar question .
Solved the problem. Firstly incorporating the suggestions by #apsillers. Then finally by moving the
<script src="./popup.js"></script>
in the body from the head, below the button tags.
All day long i'm trying to make this work, but nothing. Why, tell me pls, why is this ##!*> dont want to work?
Manifest.json
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
},
"permissions": [
"tabs"
],
"content_scripts": [
{
"matches" : ["http://*/*"],
"js": ["contentscript.js"]
}
]
}
popup.html
<script src="contentscript.js"></script>
<script>
function get(){
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
console.log(sender.tab ? "from a content script:" + sender.tab.url : "from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
else
sendResponse({}); // snub them.
});
}
get();
</script>
contentscript.js
function send(){
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
});
});
}
send();
This show me:
Uncaught TypeError: Cannot call method 'getSelected' of undefined
Uncaught TypeError: Cannot read property 'onRequest' of undefined
Thx, god. I did it. Dont forget change manifest from "file" to "http".
manifest.json
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
},
"permissions": [
"tabs"
],
"content_scripts": [
{
"matches": ["file:///*"],
"js": ["dom.js"]
}
]
}
dom.js
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if (request.action == "getDOM")
sendResponse({dom: document.body.innerHTML});
else
sendResponse({}); // Send nothing..
});
popup.html
<html>
<head>
<style type="text/css">
body
{
min-width: 357px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
chrome.tabs.getSelected(null, function (tab) {
// Send a request to the content script.
chrome.tabs.sendRequest(tab.id, { action: "getDOM" }, function (response) {
alert(response.dom);
});
});
});
</script>
</head>
<body>
<h4>Hello, world!</h4>
</body>
</html>