We spend a lot of time on web browser every day. But sometimes it makes me feel boring about tons of words and images there. So what if there is a game to that can take advantages of those elements in the web like links, divs, or images? Therefore, I want to create a chrome extension that can interact with those elements in the browser.
Three steps for creating this chrome extension
- Create a game with Matter.js (a library to create physic world)
- Make a chrome extension that I can implement this game to webpage.
- Combine them together
For nature of code part
But I am not able to get the location of bullets, if I can do that, I will have more possibilities to interact with the elements in the webpage. For example, shooting a link and it will rotate. Besides, this game can go further like when this character jumps onto a picture, it will zoom in or direct to the link.
Grabbing and Dropping
For Chrome extension part
I use activeTab in permissions of manifest.json file to get permission of chrome tabs. So it can be executed to each chrome tabs.
And then, separating the scripts with background script which will send the message to content script. If the content script gets the message, it execute the script of my game.
The first version of my game is only creating a game in web browser. So the users only have to go as further as they can, but it does not really interact with the web page.