How to manipulate HTML elements from your Chrome extension?

Question

Google Chrome

I decided to write an extension for Vkontakte (yes, a banal topic), with the help of which I wanted to change some values ​​\u200b\u200band add buttons to the page itself.
The problem is that I can't change or get values ​​from the document. The most I can do is call alert() .
Here is the script.js code :

chrome.tabs.onUpdated.addListener(function(tabId, changedInfo, tab) {
                alert('1');
                console.log('222');
            });
chrome.tabs.onCreated.addListener(function(tab) {
                alert('2');
            });

The manifest itself:

{
  "name": "VKHelper",
  "version": "1.0",
  "manifest_version": 2,
  "description": "VKHelper - расширение для работы с ВК.",
  "background": {
    "scripts": ["script.js"]
  },
  "icons": {
    "16" : "images/GB-19.png",
    "48" : "images/GB-48.png",
    "128" : "images/GB-128.png"
  },
  "browser_action": {
    "default_icon": "images/GB-19.png",
    "default_title": "VKHelper",
    "default_popup": "popup.html"
  },
  "permissions": [ "contextMenus", "tabs", "storage" , "http://*/*", "https://*/*" ]
}

Used document.getElementsByClassName , no response. How to access the document of the page itself and manipulate its elements? And how to display values ​​in the console so that I can follow the process, otherwise it doesn’t even add anything to the console.

Answer 1

Here is one answer
and two
Need to use content scripts