ページの要素変更


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>無題 1</title>
</head>

<body>
<div id="target">ここを変更する</div>
<div>ここは変更しない</div>
</body>

</html>

{
 "name": "My Third Extension",
 "version": "1.0",
 "manifest_version": 2,
 
 "description": "タブで開かれているページにスクリプトを実行する",
 
 "permissions": [
  "tabs", 
  "http://*/*",
  "https://*/*"
    ],
 
 "background": {
        "scripts": ["background.js"]
    },
 
 "browser_action": {
  "default_icon": "icon.png",
  "default_title": "chrome.windows.create"//指定しないとnameが表示
 }
}
var ele = "document.getElementById('target')";
unification = ele + ".innerHTML = '変更する'";

chrome.browserAction.onClicked.addListener(function () {

    chrome.tabs.executeScript(null,{ code: unification });
});


ページのタイトルを変更する

{
 "name": "My Third Extension",
 "version": "1.0",
 "manifest_version": 2,
 
 "description": "タブで開かれているページにスクリプトを実行する",
 
 "permissions": [
  "tabs", 
  "http://*/*",
  "https://*/*"
    ],
 
 "background": {
        "scripts": ["background.js"]
    },
 
 "browser_action": {
  "default_icon": "icon.png",
  "default_title": "chrome.windows.create"//指定しないとnameが表示
 }
}
chrome.browserAction.onClicked.addListener(function () {

    chrome.tabs.executeScript(null,
        {
            "code": "document.title = 'new page title'"
        });
});

タブに対してスクリプトを実行する

アイコンがクリックしたら、背景を青に変更する。


{
 "name": "My Third Extension",
 "version": "1.0",
 "manifest_version": 2,
 
 "description": "タブで開かれているページにスクリプトを実行する",
 
 "permissions": [
  "tabs", 
  "http://*/*",
  "https://*/*"
    ],
 
 "background": {
        "scripts": ["background.js"]
    },
 
 "browser_action": {
  "default_icon": "icon.png",
  "default_title": "chrome.windows.create"//指定しないとnameが表示
 }
}

chrome.browserAction.onClicked.addListener(function () {
    chrome.tabs.executeScript(null, {
        "code": "document.body.style.backgroundColor='blue'"
    });
});

別の書き方
unification = "document.body.style.backgroundColor='blue'";

chrome.browserAction.onClicked.addListener(function () {

    chrome.tabs.executeScript(null,
        { code: unification });
});

アイコンクリックでウインドウを開く


manifest.json
{
 "name": "My Third Extension",
 "version": "1.0",
 "manifest_version": 2,
 
 "description": "新たにウインドウを表示する",
 
 "background": {
        "scripts": ["background.js"]
    },
 
 "browser_action": {
  "default_icon": "icon.png",
  "default_title": "chrome.windows.create"//指定しないとnameが表示
 }
}

background.js
chrome.browserAction.onClicked.addListener(function () {
    chrome.windows.create({ url: 'https://www.google.co.jp/', type: 'panel','width': 800, 'height': 400 });
});

タブを開いたときに表示するページを変更


{
 "name": "My First Extension",
 "version": "1.0",
 "manifest_version": 2,
 "description": "The first extension that I made.",
 "browser_action": {
  "default_icon": "icon.png",
  "default_popup": "popup.html"
 },
 "chrome_url_overrides": {
  "newtab": "newtab.html"
 }
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>TAB Page</title>
</head>

<body>

<h1>新しタブページ </h1>

</body>

</html>