Hello. I'm a grid based layout focused on your Content. Greet your visitors & Showcase your work with style.

Hello, Everyone in this post i'll guide beginners to start developing chrome extension :)
Why to learn developing chrome extensions ?
There are a lot of reasons but main point is people love to get update in seconds and want a quick & simple interface b/w them and server in that chrome help us alot. Mostly everyone use Google Chrome  so if you can give your visitor direct interface to your site without any web address they surely love it and thats the reason you must start up with chrome extension.
What skills you need to develop a chrome extension.
  • Json ( lil bit is enough)
  • HTML
  • JS
  • CSS
The above is enough to start up.
In my last post i shown you how to code a file sharing site  what if we can develop a chrome extension on it ? isnt it cool ? :D.
  • Firstly, Go to chrome settings and select extensions tab from left side and check Developer mode.
  • Now make a folder on desktop name it whatever you want.
  • Now make a JSON file in call it "manifest.json" and put following code in it.
{
  "manifest_version": 2,

  "name": "ShareABC",
  "description": "Share any file extension ABC",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "index.html"
  },
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/"
  ]
}
The above code give your extension a valid name and then its icon and its HTML load file the content you write in index.html ll get execute.
  • So we are working on file sharing extension lets add upload form in index.html
<form method="post" action="http://urdomain/index.php" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="2000000">
<div class="upload">
<input name="userfile" type="file" id="userfile">  </div> <br>
Password (optional) : <input type="password" name="pas" placeholder="Password"><br><br><input name="upload" type="submit" class="btn btn-success" id="upload" value=" Upload &amp; Share">
</form>
  • here i am making a  post request to my file sharing script uploaded on my host it'll upload file through it on it respective server via this extension :D
So what we done is simple made a extension which ll show a upload form to user and with the help of POST request it ll upload the file and give u download link ;) here i m attaching screenshot of my extension.
ext uploading file
                                                         Screenshot of uploading file
ext upload complete
                                      ScreenShot  File uploaded



In this post i'll show you how to make your own file sharing script.
Rrequirements :-
  • Server with mysql and apache
  • A lil bit of mind ðŸ˜‡
=> let the code begin \ _(^_^)_/
  1. First of all we'll code mysql db
  • I assume that u know how to create a sql db so lets move on to table
  • From bellow mysql table query

CREATE TABLE upload (
id INT NOT NULL AUTO_INCREMENT,
name VARCHAR(30) NOT NULL,
type VARCHAR(30) NOT NULL,
size INT NOT NULL,
content MEDIUMBLOB NOT NULL,
password VARCHAR(30) NOT NULL,
protected INT NOT NULL PRIMARY KEY(id),
PRIMARY KEY(id)
);

  • so the above is our sql query :) which create a table named as upload with 7 coulmns.
  • HERE MYSQL WORK IS OVER LETS MOVE ON TO PHP MY LOVE <3
2. PHP Work start here
  • Firstly we make a config file where our database login ll be saved call it  config.php
<?php
$dbhost = 'localhost';
$dbuser = 'dnuser';
$dbpass = 'urdbpass';
$dbname = 'urdbname';
?>
  • Connect to db by connectdb.php
<?php
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die(mysql_error($conn));
mysql_select_db($dbname);
?>
  • main page with upload form call it index.php
<form method="post" action="upload.php" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="2000000">
<input name="userfile" type="file" id="userfile">  </div> <br>
Password (optional) : <input type="password" name="pas" placeholder="Password"><br>
<br>
<input name="upload" type="submit" class="btn btn-success" id="upload" value=" Upload & Share">
</form>
  • Upload file call it upload.php : here on this page we are doing upload work if user enter password then protected column in db is change to "1" and in password column given password ll be inserted and then it ll upload file :)
<?
include "config.php";
include "connectdb.php";
$password = $_POST['pas']; if (preg_match('/./', $password)) {
$passw = $_POST['pas'];
$ispro = 1;

}
else {
$ispro = 0;
$passw = '';
}

if(isset($_POST['upload']) && $_FILES['userfile']['size'] > 0)
{
$fileName = $_FILES['userfile']['name'];
$tmpName = $_FILES['userfile']['tmp_name'];
$fileSize = $_FILES['userfile']['size'];
$fileType = $_FILES['userfile']['type'];
$pass = $_POST['pass'];
$idno = mysql_insert_id();
$fp = fopen($tmpName, 'r');
$content = fread($fp, filesize($tmpName));
$content = addslashes($content);
fclose($fp);

if(!get_magic_quotes_gpc())
{
$fileName = addslashes($fileName);
}

$query = "INSERT INTO upload (name, size, type, content, password, protected ) ".
"VALUES ('$fileName', '$fileSize', '$fileType', '$content', '$passw', '$ispro' )";

mysql_query($query) or die('Error, query failed');
$last = mysql_insert_id();

$result = "check.php?id={$last}";

echo "$fileName Uploaded Succesfully !!

Download link : {$result} ";
}
?>
  • As you seen we made a password protected system so now we ll check for password in check.php
<?php
$id = $_GET['id'];
include "config.php";
include "connectdb.php";

$result = mysql_query("SELECT password, protected FROM upload WHERE id = '$id'");

while ($row = mysql_fetch_array($result, MYSQL_NUM)) {

$isprot = $row[1];
$defa = 1;
$passa = $row[0];

if ($defa == $isprot) {
// if file protected redirect to password prompt page
 header("Location: passprotected.php?id={$id}");
} else {
// if file not protected start download 
 $query = mysql_query("SELECT name, type, size, content " .
         "FROM upload WHERE id = '$id'");
list($name, $type, $size, $content) =  mysql_fetch_array($query);
header("Content-length: $size");
header("Content-type: $type");
header("Content-Disposition: attachment; filename=$name");
echo $content;
}
}
?>
  • password prompt page is passprotected.php
<?php
$id = $_GET['id'];
include "config.php";
include "connectdb.php";

?><div class="container"><br><div class="box box-default"> <center> <br> <font size="4">Wait a second, The file you are trying to download is <strong>Password Protected.</strong> Please, let us verify your identity. <hr>
<form method="post" action="pd.php?id=<?php echo "$id";?>">
Enter Password : <input type="password" name="madafa" placeholder="Password here" ><br><br> <input type="submit" class="btn btn-success"  value="Verify and Download"> 
</form><hr>
</center<hr>
</div>
</div>
  • If given password is correct start download ;) call it pd.php
<?php
$passb = $_POST['madafa'];
$id = $_GET['id'];
include "config.php";
include "connectdb.php";

$result = mysql_query("SELECT password FROM upload WHERE id = '$id'");

while ($row = mysql_fetch_array($result, MYSQL_NUM)) {

$passa = $row[0];

if ($passa == $passb) {
 $query = mysql_query("SELECT name, type, size, content " .
         "FROM upload WHERE id = '$id'");
list($name, $type, $size, $content) =  mysql_fetch_array($query);
header("Content-length: $size");
header("Content-type: $type");
header("Content-Disposition: attachment; filename=$name");
echo $content;
} else { 
header("Location: passprotected.php?id={$id}");
echo '<script>alert("The password you given is not correct.")</script>';
}
}
?>

Wohoo PROJECT COMPLETED :) here its workin demo http://shareabc.tk/packages
author
Jake Simms
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt utlaoreet dolore.