CODEWITHSUNDEEP
javascripthtmlgreasemonkeytampermonkey
summerrain
summerrain

Reputation: 227

How to copy a <div> element from one page and paste it into another page using greasemonkey/tampermonkey?

Can you help me with my first greasemonkey script? I'm a complete beginner and would be ingenuously thankful for help. I've tried a lot, but always fail. (edit: I've got some things working now)

► In short, I'd like to catch the byline from an Austrian newspaper ("Kurier") article and add it (slightly modified) to the article's print view.

So here is what the greasemonkey script should do (without external scripts such as jquery):

 
[step 1]: done
The print view of each article is located at [article URL] + "/print", for example:
      article URL: https://kurier.at/wissen/mars-simulation-auf-hawaii/249.106.702
print view URL: https://kurier.at/wissen/mars-simulation-auf-hawaii/249.106.702/print

This works for me:

// ==UserScript==
// @name        KURIER printview
// @include     https://kurier.at/*
// @exclude     https://kurier.at/*/print
// @version     1
// @run-at      document-start
// ==/UserScript==

window.location.replace(window.location + "/print");

I used @exclude to avoid an infinite loop.

To not slow down the script, it would be great if @run-at document-start could be left unchanged, so that the script does not have to render the article page but directly jumps to the printview URL. Hence only 1 page has to be rendered instead of 2 pages.

(My hope being that step 2 can either be accomplished from the printview location -- or else from the article page, but without rendering it? Either method would avoid rendering 2 pages.)

 
[step 2]: done
The byline is a div container, which comes in one of 3 different forms (depending on the number of authors):
• no author: <div class="misc no-author">
• single author: <div class="misc single-author has-image">
• multiple authors: <div class="misc multiple-authors">

Here are example articles for each type:
- no author: https://kurier.at/wissen/mars-experiment-auf-hawaii/218.311.221
- single author: https://kurier.at/wissen/mars-simulation-auf-hawaii/249.106.702
- multiple authors: https://kurier.at/wissen/mars-wann-ist-es-soweit/230.174.316

This gets us the div container:

var $byline = document.getElementsByClassName("misc");

The byline is the first div.misc on the page, so the byline is now in $byline[0].

 
[step 3]
The byline div container has this structure:

<div class="misc [no-author/single-author/multiple-authors]">
    |__ [optional content]
    |__ <div class="last-modified">
    |__ <div class="social-media-container">
    |__ <div class="clear">

a) The social media container should be removed.
b) (done) The optional content may include an image.
The image URL scheme is: https://images.kurier.at/[imagename].jpg/[size]x[size]/[imageID]
If an image is present, the pixel values should be changed from: 

<img width="35" height="35" src="https://images.kurier.at/Sandra-
Lumetsberger(2)-REdit.jpg/70x70/133.396.913" alt="Sandra Lumetsberger">

to:

<img width="100" height="100" src="https://images.kurier.at/Sandra-
Lumetsberger(2)-REdit.jpg/200x200/133.396.913" alt="Sandra Lumetsberger">

I only found this quick&dirty solution:

document.body.innerHTML = document.body.innerHTML.replace(
    /height="35" width="35"/g,
    'height="100" width="100"').replace("/70x70/", "/200x200/");

 
[step 4]
The printview page has this structure: 

<body>
    |__ <script>
    |__ <div class="wrapper">
        |__ <header class="header">
        |__ <div class="rfloat noprint">
        |__ <p class="open12 marginb10">
        |__ <div class="clear">
        |__ <article>

The byline div copied in step 2 and modified in step 3 should be pasted below the p element.

 
Thank you so very much!

Upvotes: 2

Views: 1802

Answers (1)

Pinke Helga
Pinke Helga

Reputation: 6682

When changing to another URL, the script scope is released and a new script run is started on the next page. So you cannot transfer the data directly.

Have a look at GM_getValue() & GM_setValue() functions.

You also need to include a @grant in the header.

There are some other technics to exchange data between pages

  • cookies
  • HTML5 localStorage of modern browsers
  • redirection into a GM controled Frame + messaging via custom events
  • read another page via AJAX & integrate the manipulated data into the current page - GM supports a simplified GM_xmlhttpRequest() function.

I recommend the AJAX variant, but it depends on the behavior you intend to get.

Upvotes: 1

Related Questions