How to change the style of a page loaded by a post request using a Chrome extension?

M

Mosapi2016-09-08 03:06:02

JavaScript

Mosapi, 2016-09-08 03:06:02

Good day everyone! Help proofs and masters.
I'm writing an extension for Chrome
The extension should load (open) the page when you click on the button in the popup, change the style of the necessary elements and send the file for printing.

manifest.json;

{
    "manifest_version": 2,
  
  "name": "Extension",
  "version": "1.0",
    "description": "Easy app extension",
 
    "browser_action": {
        "default_title": "Extension",
        "default_popup": "popup.html"
    },

    "permissions": [
        "activeTab"
    ],
  "content_scripts": [{
    "matches": [ "http://mi.url.ru/*" ],
    "js": ["popup.js", "jquery.js"]

    }]
}

popup.html:

<!doctype html>
<html>
  <head>
    <title>Приложение</title>
   <script src="popup.js"></script>
  <script src="jquery.js" type="text/javascript"></script>
  <link href="style.css" rel="stylesheet" type="text/css"/>
  </head>
  <body id='toby'>
    <h3>Заголовок:</h3>
        <button id="checkPage">start</button>
    <div id="dannie"></div>
  </body>
</html>

The desired page opens like this:
popup.js

document.addEventListener('DOMContentLoaded', function() {
    var checkPageButton = document.getElementById('checkPage');
    checkPageButton.addEventListener('click', function() { 
        chrome.tabs.getSelected(null, function(tab) {
            d = document;
             var f = d.createElement('form');
            f.action = tab.url;
            f.method = 'post';
            var i = d.createElement('input');
            i.type = 'hidden';
            i.name = 'url';
            i.value = tab.url;
            f.appendChild(i);
            d.body.appendChild(f);
            f.submit();
      //alert(i.value);
      window.print(); //печать, после скрытия элементов
        });
    }, false);
}, false);

style.css:

.ZS{display:none !important;font-size:0pt !important;}
.zS{display:none !important;font-size:0pt !important;}
strong{display:none !important;font-size:0pt !important;}
p{display:none !important;font-size:0pt !important;}
table{display:none !important;font-size:0pt !important;}
.xY{display:none !important;font-size:0pt !important;}
.wY{display:table-cell !important;}
h4{text-align:center !important;margin-top:5px !important;}
img{margin-bottom:30px !important;}

From here actually and two problems:
1. The opened window with the loaded page does not allow to make manipulations with its styles.
tried like this:

var el = document.getElementsByTagName("img"); 
this.style.cssText = 'display:none !important;';
и так:
this.setAttribute('src', '')

Constantly throws an error.
I tried to load the page via .load, but the problem is that there are images on the page and their paths are specified:
src="/show/utils/barcode?code=*"
If the style is specified in the manifest, then the page of the tab I'm on is distorted.
2. It is not sent to print in any way

if someone can suggest, direct or correct. help me please.

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

L

littleguga, 2016-09-08
@littleguga

1. What's wrong?
1.2 To manipulate the contents of a tab, you need to insert content scripts into it.
2. Actually, see paragraph 1.2.

R

Rou1997, 2016-09-08
@Rou1997

You have some confusion, popup.js is used both as a content script (content script) and in popup.html, but there should be 2 separate scripts, implement the interaction between them using messages (read the Messages passing article).