Hacking The Browser

Hecking the Browser - Week 3: Create a chrome extension

PREVIOUS POSTS:

Week 1: Create a responsive web site

Week 2: Create a bookmarklet against users

 

TITLE: Bootstrap is the new Geocities

DATE: Feb 13, 2017

INSTRUCTORS: Cory Forsyth

 

This week I turned my bookmarklet project "Bootstrap is the new geo" into a chrome extension and rewrote it using jQuery. here is link on github.

Some updates:

1. add icon

  "browser_action": {
        "default_title": "bootstrapIsNewGeo",
        "default_icon": "icon.png"
    },

 

2. Use local css file and images instead of getting them from my server. This will avoid the conflict between https and http

  • First, claim these files in manifest.json
    "web_accessible_resources": [
        "images/image1.png",
        "images/7upspot.gif",
        "images/americanflag.gif",
        "images/community.gif",
        "images/computer-01.gif",
        "images/computer.gif",
        "images/construction.gif",
        "images/counter2.gif",
        "images/drudgesiren.gif",
        "images/hacker.gif",
        "images/heart.gif",
        "images/hot.gif",
        "images/mailkitten.gif",
        "images/mchammer.gif",
        "images/new.gif",
        "images/new2.gif",
        "images/noframes.gif",
        "images/notepad.gif",
        "images/spinningearth.gif",
        "images/wabwalk.gif",
        "images/webtrips.gif",
        "images/yahooweek.gif",
        "img/microfab.gif",
        "img/glyphicons-halflings.png",
        "geo.css"
    ]
  • use chrome.extension.getURL() function to get the link string:
var pathToCSS = chrome.extension.getURL('/geo.css');
console.log(pathToCSS);
$("link").attr("href",pathToCSS);

 

3. make a bookmarklet like chrome extension(click to make changes)

In background.js, send the browser action to my script. Here is content.js, but it doesn't have to be the real content.js in manifest.json. In fact, it can't be claimed as the content.js in manifest.json, or it will be running all the time.

chrome.browserAction.onClicked.addListener(function(tab){
  console.log(tab.url);
  chrome.tabs.executeScript(null,{file:'jquery.js'},function(){
    chrome.tabs.executeScript(null,{file:'content.js'});
  });
})

 

4. jQuery rewriting

a new way to replace the css file and images.

$("link").attr("href",pathToCSS);

$("img").each(function(){
  $(this).attr({
  src:img[Math.floor(Math.random()*img.length)],
  srcset:img[Math.floor(Math.random()*img.length)]
  })
})

I tried to publish it to the web store:

Then I got a reject saying:

Your item did not comply with the following section of our policy: 
"Do not post repetitive content. 
Do not use irrelevant, misleading, or excessive keywords in app
descriptions, titles, or metadata. 
Do not attempt to change the placement of any Product in the store or
manipulate any Product ratings or reviews by unauthorized means, such as
fraudulent installs, paid or fake reviews or ratings, or offering
incentives to rate Products. 
Do not post an app where the primary functionality is to link to a website
not owned by the developer. 
Do not post an app where the primary functionality is to install or launch
another app, theme, or extension. For example, if your app’s primary
function is to launch a desktop app that the user has already installed, 
that is not allowed. Another example is a packaged app that just launches a
website. 
Your app must comply with Google's Webmaster Quality Guidelines." 
 

I really hope this won't affect my application for google internship, lol.

 

NoCoffee – Vision Simulator for Chrome

Link to the store: 

https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl?hl=en-US

Link to the developer website: 

https://accessgarage.wordpress.com/2013/02/09/458/

Generally speaking, NoCoffee is an extension that creates a straightforward feeling of having sight disordered or vision problems.

I really like the concept, it started with a joke what is the feeling when you were tired and had no coffee but ended with the discussion to raise attention about a real problem.