January 19, 2017

How to Create Chrome Extension

How to create Chrome extension 

Step 1:
Create one file named Manifest.json with below content

{

"manifest_version": 2,

"name": "Post",

"description": "Post",

"version": "1.0",

"content_scripts": [{

"js": ["Popup.js"],

"matches": ["http://*/*", "https://*/*"]

}],

"icons": {

"48": "icon.png"

},

"content_security_policy": "script-src 'self' <Specify all external urls with spaces>; object-src 'self'",

"permissions": [

"tabs", "<all_urls>","activeTab"

],

"browser_action": {

"default_icon": "icon.png",

"default_popup": "popup.html"

}

}

Step 2:
Create popup.html with below content

<!DOCTYPE html>
<html>
<body style="width: 500px;height:500px;background-color:lightgray;font-family:Arial; ">
<div>
<h1>My Chrome Extension</h1>
</div>
<table>
<tr>
<td style="vertical-align:top;width:2%;"></td>
<td>
<textarea id="postcontent" name="content" rows="15" cols="50" style="width:410px;"></textarea>
</td>
</tr>

</table>

<script type="text/javascript" src="Popup.js"></script>

</body>

</html>

Step 3:

Create Popup.js file with below content

chrome.tabs.executeScript({

code: "window.getSelection().toString();"

}, function (selection) {

if (selection[0] != "")

document.getElementsByTagName('textarea')[0].innerHTML = selection[0];

});

chrome.tabs.query({currentWindow: true, active: true}, function(tabs){

document.getElementById('hdnUrl').value = tabs[0].url;

});

chrome.tabs.query({

active: true,

currentWindow: true

}, function (tabs) {

chrome.tabs.executeScript(tabs[0].id, {

code: 'Array.prototype.map.call(document.images, function (i) { return i.src; });'

}, callback);

});

Now place all these files in One folder and load this folder Chrome "Load Unpacked .."
 

No comments:

Post a Comment